php bootstrap 轮播,让Bootstrap轮播插件carousel支持左右滑动手势的三种方法

Bootstrap虽然已经发布到以移动为主的Bootstrap4但其中的carousel.js插件仍然没有没有支持手势滑动。

目前有3种解决方案 ：

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');

});

hammer.js 官网：http://hammerjs.github.io/ ，版本基于v2.0.4:

var carousel = new Hammer(document.getElementById("carousel"));

carousel.on('swipeleft', function(){

$(this).carousel('next');

});

carousel.on('swiperight', function(){

$(this).carousel('prev');

});