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 相关文章推荐
ext for eclipse插件安装方法
Apr 27 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
javascript 动态生成私有变量访问器
Dec 06 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
vue-ajax小封装实例
Sep 18 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
浅谈开发eslint规则
Oct 01 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 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
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
Django rest framework基本介绍与代码示例
2018/01/26 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
使用OpenCV校准鱼眼镜头的方法
2020/11/26 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
联想阿根廷官方网站:Lenovo Argentina
2019/10/14 全球购物
营销主管自我评价怎么写
2013/09/19 职场文书
最新党员思想汇报
2014/01/01 职场文书
内勤主管岗位职责
2014/04/03 职场文书
个人自荐材料
2014/05/23 职场文书
家长给老师的感谢信
2015/01/20 职场文书
采购员岗位职责范本
2015/04/07 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers