BootStrap carousel plug in of carousel supports three methods of left and right gesture sliding of

  • 2021-07-02 23:01:46
  • OfStack

The Bootstrap carousel (Carousel) plug-in is a flexible and responsive way to add sliders to a site. In addition, the content is flexible enough to be images, inline frames, videos, or any other type of content you want to place.

Because the recent development project involves HTML5 development on mobile devices, it needs to achieve carousel effect. Then the quickest way, you know (Bootstrap), then the native Bootstrap carousel. js plug-in doesn't support gestures.

Then... find your own way, and then, there are the following three solutions:

jQuery Mobile (http://jquerymobile.com/download/)


$("#carousel-generic").swipeleft(function() {
$(this).carousel('next');
});
$("#carousel-generic").swiperight(function() {
$(this).carousel('prev');
}); 

TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)


$("#carousel-generic").swipe({
swipeLeft: function() { $(this).carousel('next'); },
swipeRight: function() { $(this).carousel('prev'); },
}); 

hammer.js (http://eightmedia.github.io/hammer.js/) +
jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)


$('#carousel-generic').hammer().on('swipeleft', function(){
$(this).carousel('next');
});
$('#carousel-generic').hammer().on('swiperight', function(){
$(this).carousel('prev');
}); 

It seems overqualified to import the whole jQuery Mobile just to support sliding gestures. (Now the original English text has been pulled away and can be downloaded.)
However, TouchSwipe is invalid when sliding in the clickable button area on both sides, and then Hammer is selected.


Related articles: