原生的 Bootstrap 的 carousel.js 插件并没有支持手势,有下面3种解决方案 :
1. jQuery Mobile (http://jquerymobile.com/download/)
1
2
3
4
5
6
|
$( "#carousel-generic" ).swipeleft( function () { $( this ).carousel( 'next' ); }); $( "#carousel-generic" ).swiperight( function () { $( this ).carousel( 'prev' ); }); |
2. TouchSwipe jQuery plugin (https://github.com/mattbryson/TouchSwipe-Jquery-Plugin)
1
2
3
4
|
$( "#carousel-generic" ).swipe({ swipeLeft: function () { $( this ).carousel( 'next' ); }, swipeRight: function () { $( this ).carousel( 'prev' ); }, }); |
3.hammer.js (http://eightmedia.github.io/hammer.js/) +
jquery.hammer.js (https://github.com/EightMedia/jquery.hammer.js)
1
2
3
4
5
6
|
$( '#carousel-generic' ).hammer().on( 'swipeleft' , function (){ $( this ).carousel( 'next' ); }); $( '#carousel-generic' ).hammer().on( 'swiperight' , function (){ $( this ).carousel( 'prev' ); }); |
走好选择的路,别选择好走的路