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 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
javascript类型转换使用方法
Feb 08 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
代码整洁之道(重构)
Oct 25 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
详解vue路由
Aug 05 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 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
Oracle 常见问题解答
2006/10/09 PHP
php 异常处理实现代码
2009/03/10 PHP
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
php中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
linux下编译安装memcached服务
2014/08/03 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
js判断浏览器类型及设备(移动页面开发)
2015/07/30 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
2016/11/16 Javascript
PHP7新特性简述
2017/06/11 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python魔法方法功能与用法简介
2019/04/04 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
介绍一下mysql的日期和时间函数
2013/03/28 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
前台文员我鉴定
2014/01/12 职场文书
美术教师岗位职责
2014/03/18 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
学生会工作感言
2015/08/07 职场文书