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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
第一次接触神奇的Bootstrap
Oct 14 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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读取xml方法介绍
2013/01/12 PHP
[原创]php使用strpos判断字符串中数字类型子字符串出错的解决方法
2017/04/01 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
jQuery序列化后的表单值转换成Json
2017/06/16 jQuery
JS图片轮播与索引变色功能实例详解
2017/07/06 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
javascript实现拖拽碰撞检测
2020/03/12 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
Python实现的中国剩余定理算法示例
2017/08/05 Python
Jupyter notebook在mac:linux上的配置和远程访问的方法
2019/01/14 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
keras训练浅层卷积网络并保存和加载模型实例
2020/07/02 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
教师岗位职责
2013/11/17 职场文书
清扬洗发水广告词
2014/03/14 职场文书
小学生环保演讲稿
2014/04/25 职场文书
业务内勤岗位职责
2014/04/30 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL