Question

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

<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">

Answer 2

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

官方文档：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)

希望这会有所帮助！

Bootstrap Carousel滑块和锤子库

2 个答案: