Bootstrap Carousel slider and hammer library

Question

I'm using hammer to do swipe in a bootstrap slider: I did it like this :

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

Or like this:

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

The html code :

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

So basically what I want to do is to detect when slide 3 is active to stop swiping right, or when the first slide is active to stop swiping left, so I did like this:

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

But I don't know how to disable swiping right or left with the hammer library? Please help! My JSFIDDLE

Answer 1

您可以在转盘上使用此data-wrap="false" ：

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

Answer 2

Hi Just update code to following, it will prevent the swipe event default behaviour.

Official Documentation: 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>  

Furthermore if you want to detect the current slide index than log the object of slider like:

 console.log(e)

Hope this will help!