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傳送帶自動循環不起作用

回答

相關問題