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 与 php 通过json数据进行通讯示例
Mar 26 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 Javascript
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
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
深入解析Python中的lambda表达式的用法
2015/08/28 Python
Python二分查找详解
2015/09/13 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
CSS3中box-shadow的用法介绍
2015/07/15 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
邮政员工辞职信
2014/01/16 职场文书
艺术节主持词
2014/04/02 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
入队仪式主持词
2015/07/04 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android