Bootstrap 旋转木马滑块和锤子库

Question

我正在使用锤子在 bootstrap 滑块中滑动：我是这样做的：

<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

您好只需将代码更新为以下内容，它将阻止滑动事件的默认行为。

官方文档：https://api.jquery.com/event.preventdefault/

<script>  

$(document).ready(function() {  
$("#myCarousel").swiperight(function(e) {  

      //Log the event object
      console.log(e);

      e.preventDefault(); 
      $("#myCarousel").carousel('prev');  
    });  
   $("#myCarousel").swipeleft(function(e) {
      e.preventDefault(); 
      $("#myCarousel").carousel('next');  
   });  
});  

</script>

此外，如果您想检测当前幻灯片索引而不是记录滑块的对象，例如：

 console.log(e)

希望对您有所帮助！

Answer 2

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

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

Bootstrap 旋转木马滑块和锤子库

Bootstrap Carousel slider and hammer library

javascript

jquery

twitter-bootstrap

hammer.js