2014-01-03 3 views
1

--UPDATE-- Я нашел решение, пауза не работает для меня, но я обнаружил, что если добавить: интервала: ложные он работает так же, как я хотел. спасибо вам, ребята :)Bootstrap карусель автоматического запуска пауза

Я использую 3 карусели Bootstrap, я пытался остановить ее, чтобы она не автоматически скользила. Я использовал функцию, предоставленную ими. Это то, что у меня есть:

$('.carousel').carousel({ 
    .carousel('pause') 
}) 

Как я могу остановить его?

Это HTML, по умолчанию со страницы образца Bootstrap в:

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <iframe width="100%" height="630" src="//www.youtube.com/embed/9vTguAVhjBo" frameborder="0" allowfullscreen></iframe> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Example headline.</h1> 
      <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <iframe width="100%" height="630" src="//www.youtube.com/embed/gyV2CSqJi1I" frameborder="0" allowfullscreen></iframe> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Another example headline.</h1> 
      <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> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p> 
     </div> 
     </div> 
    </div> 
    <div class="item"> 
     <iframe width="100%" height="630" src="//www.youtube.com/embed/kYbvYS65iDs" frameborder="0" allowfullscreen></iframe> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>One more for good measure.</h1> 
      <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> 
      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a> 
</div><!-- /.carousel --> 

ответ

1

Вместо этого, используйте эту строку

$('.carousel').carousel('pause'); 
+0

Это не сделал остановить его :( – user3137650

+0

Можете ли вы показать мне HTML? У вашей карусели класс карусели? –

2

интервал: количество времени для задержки между автоматическим велосипедного товар. Если false, карусель автоматически не будет циклически изменяться.

$('.carousel').carousel({ 
    interval: false 
}) 
0

передача атр данных интервал

заменить

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

в

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> 

дифф: данные интервал = "ложь"

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