【转】让 Bootstrap 轮播效果支持左右滑动手势

最新推荐文章于 2021-01-17 13:34:50 发布

wangyanlong0107

最新推荐文章于 2021-01-17 13:34:50 发布

阅读量308

点赞数

分类专栏： javascript 前台文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/wangyanlong0107/article/details/84860076

版权

javascript 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前台

5 篇文章 0 订阅

订阅专栏

因为最近开发的项目涉及到移动设备上的 HTML5 开发，其中需要实现轮播效果。

然后最快捷的方式，你知道的（Bootstrap），然后原生的 Bootstrap 的 carousel.js 插件并没有支持手势。

然后......自己想办法呗，再然后，就有下面3种解决方案：

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

[javascript]view plaincopy
        
    
$("#carousel-generic").swipeleft(function() {  
    $(this).carousel('next');  
});  
  
$("#carousel-generic").swiperight(function() {  
    $(this).carousel('prev');  
});  

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

[javascript]view plaincopy
        
    
$("#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)

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