使用自举carousel.js

试图查看以下HTM失败了，但我没有得到相同的结果使用自举carousel.js

http://twitter.github.com/bootstrap/javascript.html - 转盘

JS/Default.js：

$(function() { 
    // $('.carousel').carousel({ interval: 2000 }) 

     $('#myCarousel').carousel() 
      });

标记：

<head> 
     <link href="Resources/Styles/bootstrap.css" rel="stylesheet" type="text/css" /> 
     <title></title> 
    </head> 

    <body> 
     <h2>Example carousel</h2> 
     <p>Watch the slideshow below.</p> 
     <div id="myCarousel" class="carousel slide"> 
      <div class="carousel-inner"> 
       <div class="item active"> 
        <img src="Images/Browser/add.JPG" /> 
        <div class="carousel-caption"> 
         <h4>First Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id 
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies 
          vehicula ut id elit.</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="Images/Browser/delete.JPG" /> 
        <div class="carousel-caption"> 
         <h4>Second Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id 
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies 
          vehicula ut id elit.</p> 
        </div> 
       </div> 
       <div class="item"> 
        <img src="Images/Browser/rename.JPG" /> 
        <div class="carousel-caption"> 
         <h4>Third Thumbnail label</h4> 
         <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id 
          elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies 
          vehicula ut id elit.</p> 
        </div> 
       </div> 
      </div> 
      <!-- Carousel nav --> 
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
     </div> 
     <script src="Resources/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
     <script type="text/javascript" src="js/Common.js"></script> 
     <script type="text/javascript" src="Resources/Scripts/bootstrap-carousel.js"></script> 
     <script src="js/Default.js" type="text/javascript"></script> 
    </body> 

</html>

来源

2012-02-10 Elad Benda

您粘贴看起来像它相匹配的旋转木马插件的要求的HTML。唯一没有看到的可能是你的问题：你需要包含jquery，主bootstrap.js以及bootstrap-carousel.js文件。 – dsummersl 2012-02-10 12:54:50

他们全部导入的底部 – 2012-02-10 13:07:01

当你说你没有得到与演示中相同的结果时，你会得到什么？有什么不同或错误？也许如果你尝试包括整个bootstrap.js文件，而不是只传送带？ – periklis 2012-02-10 13:23:17

正如我在上面的评论中提到的，如果你只看到一个没有格式化的幻灯片用户界面引导程序的列表，那么你可能没有引用引导CSS文件（也许你有错误的URL）。在您的浏览器中使用'Web Inspector'或'Developer Tools'来确保您包含的JS和CSS文件实际上正在被发现（如果没有，您将看到红色文本！）。

为了帮助你实现这个功能我已经创建了一个minimimal使用原始文本工作的jsfiddle例如：

example implementation

获得转盘工作所需的基本步骤是：

使用carousel,carousel-inner和item类正确地格式化您的html（您的确做了正确的操作）。
包含bootstrap.css文件。
包括以下JavaScript文件：jQuery的，引导过渡，引导传送带

来源

2012-02-10 15:25:07 dsummersl

我怎样才能使灰色字幕+照片适合于智力大小（不是所有的屏幕）和居中的div？我试图把里面的proprer高度和宽度的div - 但它仍然在整个屏幕宽度 – 2012-02-10 16:33:41

我想它看起来像这里的例子http://twitter.github.com/bootstrap/javascript.html（在旋转木马下） – 2012-02-10 16:38:39

我的第一个猜测是你应该使用bootstrap的spanX类 - 但我不确定你要做什么。你能修改jsfiddle并给我一个链接，以便我更好地了解你要做什么？ – dsummersl 2012-02-10 16:39:28

使用自举carousel.js

回答

相关问题