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 相关文章推荐
javascript 多级checkbox选择效果
Aug 20 Javascript
在chrome中window.onload事件的一些问题
Mar 01 Javascript
js模拟类继承小例子
Jul 17 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
JavaScript中this详解
Sep 01 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 Javascript
关于vue的列表图片选中打钩操作
Sep 09 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和ACCESS写聊天室(八)
2006/10/09 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
laravel 数据验证规则详解
2019/10/23 PHP
IE iframe的onload方法分析小结
2010/01/07 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
vue二级路由设置方法
2018/02/09 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
python创建和使用字典实例详解
2013/11/01 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
详解Python 解压缩文件
2019/04/09 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python3监控疫情的完整代码
2020/02/20 Python
django中的数据库迁移的实现
2020/03/16 Python
详解Django配置JWT认证方式
2020/05/09 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
学校介绍信范文
2014/01/14 职场文书
2014年社区党建工作总结
2014/11/11 职场文书
北京天坛导游词
2015/02/12 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
golang 如何通过反射创建新对象
2021/04/28 Golang
Redis的字符串是如何实现的
2021/10/24 Redis
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电