javascript - Bootstrap Carousel slider 和锤子库

Question

我正在使用锤子在 Bootstrap slider 中进行滑动:我是这样做的:

<script>  
$(document).ready(function() {  
   $("#myCarousel").swiperight(function() {  
      $("#myCarousel").carousel('prev');  
    });  
   $("#myCarousel").swipeleft(function() {  
      $("#myCarousel").carousel('next');  
   });  
});  
</script>  

或者像这样:

<script>  
        $('#myCarousel').hammer().on('swipeleft', function(){
            $('#myCarousel').carousel('next'); 
          })
          $('#myCarousel').hammer().on('swiperight', function(){
            $('#myCarousel').carousel('prev'); 
          })
        </script>

html 代码:

<div id="carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1" class=""></li>
        <li data-target="#carousel" data-slide-to="2" class=""></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active"  id="mobile-item1">
            <img src="http://cdn.jssor.com/demos/img/landscape/01.jpg"/>
        </div>
        <div class="item"  id="mobile-item2">
            <img  src="http://cdn.jssor.com/demos/img/landscape/01.jpg"/>
        </div>
        <div class="item"  id="mobile-item3">
            <img  src="http://cdn.jssor.com/demos/img/landscape/01.jpg"/>
        </div>
    </div>
</div>

所以基本上我想要做的是检测幻灯片 3 何时处于事件状态以停止向右滑动，或者何时第一张幻灯片处于事件状态以停止向左滑动，所以我这样做了:

$('.carousel').on('slid.bs.carousel', function() {
    if ($('#mobile-item3').hasClass('active')) {
     //disable swiping right
    }
   if ($('#mobile-item1').hasClass('active')) {
     //disable swiping left
    }
  });

但我不知道如何禁用锤子库向右或向左滑动？请帮忙! My JSFIDDLE

Answer 1

您可以在轮播上使用此data-wrap="false":

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