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

Вы указывая на неправильный контейнер в вашем карусельного вызова, он должен быть идентификатор вашего контейнера изображения, а не класс;

JS^{фиксированной}

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

источник

2012-03-16 02:15:46

спасибо! Я бы поднял твою репутацию, если мог, но я еще не совсем там! Я чувствую себя глупо, делая такую крошечную ошибку! –

@AlexFlood взял меня на некоторое время, чтобы увидеть его, но это случается со всеми нами :) –

В отношении вышеуказанного ответа, вы можете также использовали класс. Вы просто ввели идентификатор, как если бы это был класс. Если вы это сделали:

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

Это сработало бы отлично.

источник

2012-04-20 20:56:30 legacybass

Twitter Bootstrap Автоматический цикл карусели не работает

ответ

Смежные вопросы