Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法


Posted in Javascript onOctober 13, 2016

最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销。bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以,但有些还是没加入,比如幻灯轮播触屏左右滑动手势就不支持,大家用的设备基本是触屏的了,能用滑动交互在小屏幕上体验会更好,那么如何实现呢?一个比较简单的方法是增加一个滑动手势js插件:hammer.js,网上有很多cdn调用地址,像//cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js,我们在head中加载一下然后再通过javascript把swipe功能调用出来就可以了。下面是幻灯片的原始html代码

<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
</ol>
<div role="listbox" class="carousel-inner">
<div class="item">
<img alt="First slide" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/1/default.jpg" data-holder-rendered="true">
</div>
<div class="item active">
<img alt="Second slide [1140x500]" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/2/default.jpg" data-holder-rendered="true">
</div>
<div class="item">
<img alt="Third slide [1140x500]" src="http://ibootstrap-file.b0.upaiyun.com/lorempixel.com/1600/500/sports/3/default.jpg" data-holder-rendered="true">
</div>
</div>
<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" role="button" href="#carousel-example-generic" class="right carousel-control">
<span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

关键的步骤来了,我们需要写一个javascript命令调用hammer.js中的swipe功能

<script>
$(function(){
var myElement= document.getElementById('carousel-example-generic')
var hm=new Hammer(myElement);
hm.on("swipeleft",function(){
$('#carousel-example-generic').carousel('next')
})
hm.on("swiperight",function(){
$('#carousel-example-generic').carousel('prev')
})
})
</script>

div的id一定要对应,上面是carousel-example-generic,javascript中也要这个,否则不能实现。

需要注意的是,jquery版本最好是1.9版本的jquery-1.9.1.min.js,否则可能在电脑上可以实现手势滑动,而在手机上无法触摸滑动

javascript命令这个是关键,不会写不会改就不好玩了。做个标记,方便日后查询

以上所述是小编给大家介绍的Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js事件监听机制(事件捕获)总结
Aug 08 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
详解http访问解析流程原理
Oct 18 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
Node.js中常规的文件操作总结
Oct 13 #Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 #Javascript
js图片切换具体实现代码
Oct 13 #Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 #Javascript
jquery实现图片切换代码
Oct 13 #Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 #Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 #Javascript
You might like
Zerg剧情介绍
2020/03/14 星际争霸
Chrome Web App开发小结
2014/09/04 PHP
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
常见的浏览器存储方式(cookie、localStorage、sessionStorage)
2019/05/07 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
5种Python单例模式的实现方式
2016/01/14 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
浅谈Python3中print函数的换行
2020/08/05 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
StringBuilder和String的区别
2015/05/18 面试题
晚会邀请函范文
2014/01/24 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
小学班级标语口号大全
2015/12/26 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
爱国之歌(8首)
2019/09/29 职场文书
导游词之凤凰古城
2019/10/22 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
Python3.10的一些新特性原理分析
2021/09/15 Python
详细聊聊vue中组件的props属性
2021/11/02 Vue.js