2012-03-16 44 views
11

Tôi đã sử dụng trình khởi động twitter không có vấn đề gì, cho đến khi tôi bắt đầu sử dụng plugin băng chuyền. Các điều khiển băng chuyền hoạt động tốt và nó chuyển đổi suôn sẻ, nhưng nó không tự động chu kỳ! Tôi đã tìm kiếm độ tuổi, nhưng không thể tìm thấy bất kỳ giải pháp nào. Nếu bất cứ ai có bất kỳ ý tưởng, xin vui lòng cho tôi biết, tôi sẽ rất biết ơn.Twitter Bootstrap Carousel chu kỳ tự động không hoạt động

<!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> 

Trả lời

16

Bạn đang trỏ đến container sai trong cuộc gọi băng chuyền của bạn, nó phải là id của container hình ảnh của bạn và không phải là một lớp;

JScố định

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

Cảm ơn bạn rất nhiều! Tôi sẽ lập đại diện của bạn nếu tôi có thể, nhưng tôi chưa hoàn toàn ở đó! Tôi cảm thấy ngớ ngẩn làm một sai lầm nhỏ như vậy! –

+3

@AlexFlood đã cho tôi một thời gian để xem nó nhưng nó sẽ xảy ra với tất cả chúng ta :) –

6

Trong tham chiếu đến các câu trả lời trên, bạn cũng có thể sử dụng một lớp. Bạn chỉ cần đặt ID trong như thể nó là một lớp học. Nếu bạn đã thực hiện:

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

Nó sẽ hoạt động tốt.

Các vấn đề liên quan