bootstrap大图轮播手机端不能手指滑动解决办法

简介:

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用:

1
2
3
4
5
6
7
8
9
10
  1 <script> 
  2     $( function (){ 
  3          var  myTouch = util.toucher(document.getElementById( 'carousel-index' )); 
  4         myTouch.on( 'swipeLeft' , function (e){ 
  5             $( '.right' ).click(); 
  6         }).on( 'swipeRight' , function (e){ 
  7             $( '.left' ).click(); 
  8         }); 
  9     })
  10 </script>


获取的id为整个大图轮播最外层的id,

$('.right')、$('.left') 为左右点击箭头的类名,如轮播不需要左右箭头,给箭头加 display:none; 就可以。




本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1905169,如需转载请自行联系原作者
相关文章
|
11月前
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
10月前
|
前端开发 JavaScript 索引
|
3月前
|
前端开发
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
华为手机运行崩溃不显示报错信息的解决办法
华为手机运行崩溃不显示报错信息的解决办法
|
前端开发 JavaScript 索引
前端|Bootstrap 实例 - 简单的轮播插件
前端|Bootstrap 实例 - 简单的轮播插件
236 0
|
前端开发
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
使用bootstrap-table时数据列过多,又想某列特殊显示?推荐你使用bootstrap-table-fixed-columns来解决吧!使用时需要注意 bootstrap-table和bootstrap-table-fixed-columns尽量保持一致,以防奇怪问题出现
654 0
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
|
前端开发
解决BootStrap轮播图片中图片大小和父div不一致问题
解决BootStrap轮播图片中图片大小和父div不一致问题
765 0
解决BootStrap轮播图片中图片大小和父div不一致问题
|
前端开发 JavaScript 安全
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
Bootstrap警告和轮播插件详解【前端Bootstrap框架】
|
前端开发 JavaScript
Bootstrap教程(26)–轮播的实现
本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结
235 0
Bootstrap教程(26)–轮播的实现