BootStrap实现手机端轮播图左右滑动事件


Posted in Javascript onOctober 13, 2016

用bootstrap做出的项目轮播图在手机端不能滑动,为此找了好多插件、框架。但是都不能和bootstrap良好的结合。

功夫不负有心人,经过一番查找终于在github找到了一段js:toucher.js,原文链接:https://github.com/bh-lay/toucher

由于个人水平原因代码没看懂抓狂,不过使用还是没问题滴。

第一.在head中加载toucher.js。

<script type="text/JavaScript" src="__PUBLIC__/home/js/toucher.js"></script>

第二.在轮播图页面实现触屏事件。

轮播图代码:

<div id="carousel-example-generic" class="carousel slide both" data-ride="carousel"> 
<!-- Indicators --> 
<ol class="carousel-indicators"> 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
<li data-target="#carousel-example-generic" data-slide-to="1"></li> 
<li data-target="#carousel-example-generic" data-slide-to="2"></li> 
</ol> 
<!-- Wrapper for slides --> 
<div class="carousel-inner" role="listbox"> 
<div class="item active"> 
<img src="__PUBLIC__/home/img/banner_01.jpg" alt="..."> 
<div class="carousel-caption"> 
... 
</div> 
</div> 
<div class="item"> 
<img src="__PUBLIC__/home/img/banner_02.jpg" alt="..."> 
<div class="carousel-caption"> 
... 
</div> 
</div> 
<div class="item"> 
<img src="__PUBLIC__/home/img/banner_03.jpg" alt="..."> 
<div class="carousel-caption"> 
... 
</div> 
</div> 
</div> 
<!-- Controls --> 
<a id="carleft" class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a id="carright" class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 
</div>

js代码:

<script> 
var myTouch = util.toucher(document.getElementById('carousel-example-generic')); 
myTouch.on('swipeLeft',function(e){ 
$('#carright').click(); 
}).on('swipeRight',function(e){ 
$('#carleft').click(); 
}); 
</script>

ok手机端可以用了。

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

Javascript 相关文章推荐
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
May 28 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
Dec 24 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
js图片切换具体实现代码
Oct 13 #Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 #Javascript
jquery实现图片切换代码
Oct 13 #Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 #Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 #Javascript
Javascript中this绑定的3种方法与比较
Oct 13 #Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 #Javascript
You might like
提问的智慧
2006/10/09 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
javascript import css实例代码
2008/07/18 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
wxPython色环电阻计算器
2019/11/18 Python
Python更新所有已安装包的操作
2020/02/13 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
外贸采购员求职的自我评价
2013/11/26 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
2019思想汇报范文
2019/05/21 职场文书