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 EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
Nov 13 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
深入了解JavaScript 防抖和节流
Sep 12 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
3.从实例开始
2006/10/09 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
优化WordPress的Google字体以加速国内服务器上的运行
2015/11/24 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
P3P Header解决Cookie跨域的问题
2013/03/12 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
应届毕业生的个人自我鉴定
2013/10/24 职场文书
劳动模范事迹材料
2014/01/19 职场文书
实习老师离校感言
2014/02/03 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
python生成可执行exe控制Microsip自动填写号码并拨打功能
2021/06/21 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python