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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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程序中防止盗链
2008/04/09 PHP
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php中序列化与反序列化详解
2017/02/13 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
微信小程序 聊天室简单实现
2017/04/19 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
node.js之基础加密算法模块crypto详解
2018/09/11 Javascript
vue-i18n结合Element-ui的配置方法
2019/05/20 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
VSCode下配置python调试运行环境的方法
2018/04/06 Python
浅谈Python中eval的强大与危害
2019/03/13 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
初任培训自我鉴定
2013/10/07 职场文书
小学新学期教师寄语
2014/01/18 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
公务员诚信承诺书
2014/05/26 职场文书
爱国口号
2014/06/19 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
重阳节标语大全
2014/10/07 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers