xesa xesa - 3 months ago 20
jQuery Question

Bootstrap Carousel slider and hammer library

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

You can use this data-wrap="false" on your carousel :

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