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 入门讲解1
Apr 15 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
ES6的解构赋值实例详解
May 06 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 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
一个改进的UBB类
2006/10/09 PHP
深入解析php之sphinx
2013/05/15 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
php微信开发之图片回复功能
2018/06/14 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python3利用print输出带颜色的彩色字体示例代码
2019/04/08 Python
python join方法使用详解
2019/07/30 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
体育活动总结范文
2014/05/04 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
MySQL表字段时间设置默认值
2021/05/13 MySQL
解决Python字典查找报Keyerror的问题
2021/05/26 Python