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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
JS简单随机数生成方法
Sep 05 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 Javascript
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
9个JavaScript日常开发小技巧
Oct 06 Javascript
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
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
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
php设计模式之单例模式使用示例
2014/01/20 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
javascript 写类方式之六
2009/07/05 Javascript
基于jquery的无缝循环新闻列表插件
2011/03/07 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
2016/12/02 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
2017/04/27 jQuery
Vue基于NUXT的SSR详解
2017/10/24 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
挂职学习心得体会
2014/09/09 职场文书
学校社团活动总结
2015/05/07 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
Python time库的时间时钟处理
2021/05/02 Python
logback 实现给变量指定默认值
2021/08/30 Java/Android