BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)


Posted in Javascript onJuly 07, 2016

Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

因为最近开发的项目涉及到移动设备上的 HTML5 开发,其中需要实现轮播效果。然后最快捷的方式,你知道的(Bootstrap),然后原生的 Bootstrap 的 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');
});

单单为了支持滑动手势而导入整个 jQuery Mobile 貌似有些大材小用,(现在英文原文中已经抽离,可下载)
而 TouchSwipe 在两边可点击按钮区域滑动无效,然后选择了 Hammer。

以上所述是小编给大家介绍的BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery下checked取值问题的解决方法
Aug 09 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
Nuxt.js 数据双向绑定的实现
Feb 17 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
vue实现倒计时功能
Mar 24 Vue.js
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 #Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 #Javascript
jQuery之简单的表单验证实例
Jul 07 #Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 #Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 #Javascript
Node.js DES加密的简单实现
Jul 07 #Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 #Javascript
You might like
php中随机显示图片的函数代码
2011/06/23 PHP
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
2016/08/23 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
JS简单判断滚动条的滚动方向实现方法
2017/04/28 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
Python的print用法示例
2014/02/11 Python
python迭代器实例简析
2014/09/25 Python
Python中分数的相关使用教程
2015/03/30 Python
Python最基本的输入输出详解
2015/04/25 Python
在Python中使用列表生成式的教程
2015/04/27 Python
python常用知识梳理(必看篇)
2017/03/23 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
CSS3哪些新特性值得称赞
2016/03/02 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
物理教育专业毕业生推荐信
2013/11/03 职场文书
创业计划书如何编写
2014/02/06 职场文书
小学二年级学生评语
2014/04/21 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
武当山导游词
2015/02/03 职场文书
世界地球日活动总结
2015/02/09 职场文书
大学生求职意向书
2015/05/11 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server