Twitter Bootstrap传送带自动循环不起作用

我一直在使用twitter bootstrap，没有问题，直到我开始使用传送带插件。转盘控制工作正常，转换顺畅，但不会自动循环！我已经搜索了许多年龄段，但找不到任何解决方案。如果有人有任何想法，请让我知道，我会非常感激。Twitter Bootstrap传送带自动循环不起作用

<!DOCTYPE html> 
    <html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Your Income Expert</title> 
    <link rel="stylesheet/less" type="text/css" href="less/style.less"> 
    <script src="js/less.js" type="text/javascript"></script> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 
    <script src="js/bootstrap-tab.js" type="text/javascript"></script> 
    <script src="js/bootstrap-carousel.js" type="text/javascript"></script> 
    <script src="js/bootstrap-transition.js" type="text/javascript"></script> 
</head> 

<body> 
    <div class="container"> 
     <div class="row"> 

      <div class="span3"> 
       <div class="well sidebar-nav"> 

        <ul class="nav nav-list"> 
         <li><h2>Your Logo Here</h2></li> 
         <li class="nav-header">Main</li> 
         <li class="active"><a href="index.html">Home</a></li> 
         <li><a href="company.html">Company</a></li> 
         <li><a href="services.html">Services</a></li> 
         <li><a href="#">Books</a></li> 
         <li><a href="#">Contact</a></li> 
         <li class="nav-header">Keep In Touch</li> 
         <li><a href="#">Facebook</a></li> 
         <li><a href="#">Twitter</a></li> 
         <li><a href="#">LinkedIn</a></li> 
         <li><a href="#">Blog</a></li> 
        </ul> 
       </div><!--/.well --> 
      </div><!--/span--> 

      <div class="span9"> 
       <div class="well"> 

        <div id="headerCarousel" class="carousel slide"> 
         <div id="carousel-inner"> 
          <div class="active item"><a href="#"><img src="broker.png" alt="" /></a></div> 
          <div class="item"><a href="#"><img src="2.png" alt="" /></a></div> 
          <div class="item"><a href="#"><img src="3.png" alt="" /></a></div> 
         </div> 
         <a class="carousel-control left" href="#headerCarousel" data-slide="prev">&lsaquo;</a> 
         <a class="carousel-control right" href="#headerCarousel" data-slide="next">&rsaquo;</a> 
        </div> 

        <ul class="nav nav-tabs"> 
         <li class="active"><a data-toggle="tab" href="#home">Service 1</a></li> 
         <li><a data-toggle="tab" href="#profile">Service 2</a></li> 
         <li><a data-toggle="tab" href="#messages">Service 3</a></li> 
         <li><a data-toggle="tab" href="#settings">Service 4</a></li> 
        </ul> 

        <div class="tab-content"> 
         <div class="tab-pane active" id="home"> 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p> 
         </div> 
         <div class="tab-pane" id="profile"> 
          <p>Testing the profile tab.</p> 
         </div> 
         <div class="tab-pane" id="messages"> 
          <p>Testing the messages tab</p> 
         </div> 
         <div class="tab-pane" id="settings"> 
          <p>Testing the settings tab.</p> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 

    </div> 
    <script> 
     $('.headerCarousel').carousel({ interval: 1200 }) 
    </script> 
</body>

来源

2012-03-16 Alex Flood

你指着你的旋转木马调用错误的容器，它应该是你的图像容器的id，而不是一类;

JS^固定

$('#headerCarousel').carousel({ 
    interval: 1200 
});

来源

2012-03-16 02:15:46

非常感谢！如果可以的话，我会代表你的代表，但我还没有到达那里！我觉得这样一个小小的错误是愚蠢的！ – 2012-03-16 02:39:10

@AlexFlood花了我一段时间看到它，但它发生在我们所有人身上:) – 2012-03-16 02:49:43

在参照上面的回答，你也可以用一个类。您只需将ID放入，就好像它是一个班级一样。如果你已经完成：

$('.carousel.slide').carousel({ 
    interval: 1200 
});

它会工作得很好。

来源

2012-04-20 20:56:30 legacybass

Twitter Bootstrap传送带自动循环不起作用

回答

相关问题