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,如需转载请自行联系原作者
相关文章
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
1月前
|
容器
Bootstrap5 轮播1
Bootstrap5 轮播组件用于创建循环播放的幻灯片效果。通过设置 `carousel` 类和 `data-bs-ride=&quot;carousel&quot;` 属性,结合指示符、图片容器和切换按钮,可实现自动或手动切换的图片轮播。
Bootstrap5 轮播1
|
前端开发 JavaScript 索引
|
7月前
|
前端开发
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
Bootstrap 5 保姆级教程(十):导航栏 & 轮播
华为手机运行崩溃不显示报错信息的解决办法
华为手机运行崩溃不显示报错信息的解决办法
|
前端开发 JavaScript 索引
前端|Bootstrap 实例 - 简单的轮播插件
前端|Bootstrap 实例 - 简单的轮播插件
255 0
|
前端开发 容器
Bootstrap4(一)重点----网格系统,图像形状,轮播,多媒体对象,滚动监听
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
193 0
Bootstrap4(一)重点----网格系统,图像形状,轮播,多媒体对象,滚动监听
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
使用bootstrap-table时数据列过多,又想某列特殊显示?推荐你使用bootstrap-table-fixed-columns来解决吧!使用时需要注意 bootstrap-table和bootstrap-table-fixed-columns尽量保持一致,以防奇怪问题出现
921 0
使用bootstrap-table-fixed-columns固定表格列时底部滑动出现BUG
|
前端开发
|
前端开发
解决BootStrap轮播图片中图片大小和父div不一致问题
解决BootStrap轮播图片中图片大小和父div不一致问题
935 0
解决BootStrap轮播图片中图片大小和父div不一致问题