自動再生カルーセルを停止する方法

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

私はあなたが使用しているスライダーわからないけど、一般的にはスライダーが「dosen場合は、以下のような初期化時に渡すことができます設定、

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

でそれを試してみてくださいを与えますスライダのjavascriptファイルを共有してください。