第玖章 让Bootstrap轮播插件carousel协助左右滑行手势的两种办法

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

 

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

因为近年来支付的档次事关到移动装备上的 HTML5开发,个中须求落成轮播效果。然后最便捷的不二等秘书诀,你驾驭的(Bootstrap),然后原生的
Bootstrap 的 carousel.js 插件并未匡帮手势。

原文:http://www.weste.net/2014/7-16/97866.html?utm\_source=tuicool&utm\_medium=referral

 

英文原来的文章:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

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

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

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

只有为了帮忙滑动手势而导入整个 jQuery Mobile
貌似有个别扣壶长吟,(未来英文原稿中早已抽离,可下载)
而 TouchSwipe 在两边可点击按钮区域滑动无效,然后选用了 Hammer。

然后……本人想方法呗,再然后,就有上边三种缓解方案 :

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

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

 

 

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

相关文章