如何停止自动播放旋转木马

Question

我一直在寻找在同一页中的多旋转木马脚本，我发现一个非常有用的答案， 我只是问你是否可以帮我编辑脚本，因为我需要它非自动播放。

这里是我发现

$('.customCarousel').carousel({ 
 
    interval: 4000 
 
}); 
 

 
// handles the carousel thumbnails 
 
$('[id^=carousel-selector]').click(function() { 
 
    var id_selector = $(this).attr('id'); 
 
    var id = id_selector.substr(id_selector.length - 1); 
 
    id = parseInt(id); 
 
    var parent = $(this).closest('ul').data('carousel'); 
 
    $('#myCarousel' + parent).carousel(id); 
 
    $('[id^=carousel-selector' + parent +'-]').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
}); 
 

 
// when the carousel slides, auto update 
 
$('.customCarousel').on('slid', function (e) { 
 
    var cont = $(this).data('carousel'); 
 
    var id = $('#myCarousel'+ cont +' .item.active').data('slide-number'); 
 
    id = parseInt(id); 
 
    $('[id^=carousel-selector' +cont+'-]').removeClass('selected'); 
 
    $('[id^=carousel-selector'+cont+'-' + id + ']').addClass('selected'); 
 
});

.selected img { 
 
    opacity:0.5; 
 
}

<!-- thumb navigation carousel --> 
 
<div class="col-md-12"> 
 
    <!-- thumb navigation carousel items --> 
 
    <ul class="list-inline" data-carousel="1"> 
 
     <li> <a id="carousel-selector1-0" class="selected"> 
 
      <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
     <li> <a id="carousel-selector1-1"> 
 
      <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
     <li> <a id="carousel-selector1-2"> 
 
      <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
     <li> <a id="carousel-selector1-3"> 
 
      <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<!-- main slider carousel --> 
 
<div class="row"> 
 
    <div class="col-md-12" id="slider"> 
 
     <div class="col-md-12" id="carousel-bounding-box"> 
 
      <div id="myCarousel1" data-carousel="1" class="carousel slide customCarousel"> 
 
       <!-- main slider carousel items --> 
 
       <div class="carousel-inner"> 
 
        <div class="active item" data-slide-number="0"> 
 
         <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive"/> 
 
        </div> 
 
        <div class="item" data-slide-number="1"> 
 
         <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"/> 
 
        </div> 
 
        <div class="item" data-slide-number="2"> 
 
         <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive"/> 
 
        </div> 
 
        <div class="item" data-slide-number="3"> 
 
         <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive"/> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!--/main slider carousel--> 
 

 
<hr/> 
 

 
<!-- thumb navigation carousel --> 
 
<div class="col-md-12"> 
 
    <!-- thumb navigation carousel items --> 
 
    <ul class="list-inline" data-carousel="2"> 
 
     <li> <a id="carousel-selector2-0" class="selected"> 
 
      <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
     <li> <a id="carousel-selector2-1"> 
 
      <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
     <li> <a id="carousel-selector2-2"> 
 
      <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
     <li> <a id="carousel-selector2-3"> 
 
      <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive"/> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
</div> 
 
<!-- main slider carousel --> 
 
<div class="row"> 
 
    <div class="col-md-12" id="slider"> 
 
     <div class="col-md-12" id="carousel-bounding-box"> 
 
      <div id="myCarousel2" data-carousel="2" class="carousel slide customCarousel"> 
 
       <!-- main slider carousel items --> 
 
       <div class="carousel-inner"> 
 
        <div class="active item" data-slide-number="0"> 
 
         <img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive"/> 
 
        </div> 
 
        <div class="item" data-slide-number="1"> 
 
         <img src="http://placehold.it/1200x480/888/FFF" class="img-responsive"/> 
 
        </div> 
 
        <div class="item" data-slide-number="2"> 
 
         <img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive"/> 
 
        </div> 
 
        <div class="item" data-slide-number="3"> 
 
         <img src="http://placehold.it/1200x480&amp;text=four" class="img-responsive"/> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!--/main slider carousel-->

预先感谢您的例子。

Answer 1

我不知道你正在使用滑块，但在一般的做法滑块给出一个可以在像下面初始化的时候通过配置，

$('.customCarousel').carousel({ 
interval: 4000, AutoPlay:false }); 

与试试吧，如果多申” t works请分享滑块的JavaScript文件。