DaiCuoBBs

 找回密码
 免费注册

QQ登录

只需一步,快速开始

[Bootstrap] 让Bootstrap的Carousel在移动端支持滑动切换

[复制链接]
admin 发表于 2019-12-13 15:52:41 | 显示全部楼层 |阅读模式
  1. <script type="text/javascript">
  2.     var isTouch=('ontouchstart' in window);
  3.     if(isTouch){
  4.       $(".carousel").on('touchstart', function(e){
  5.           var that=$(this);
  6.           var touch = e.originalEvent.changedTouches[0];
  7.           var startX = touch.pageX;
  8.           var startY = touch.pageY;
  9.           $(document).on('touchmove',function(e){
  10.             touch = e.originalEvent.touches[0] ||e.originalEvent.changedTouches[0];
  11.             var endX=touch.pageX - startX;
  12.             var endY=touch.pageY - startY;
  13.             if(Math.abs(endY)<Math.abs(endX)){
  14.               if(endX > 10){
  15.                 $(this).off('touchmove');
  16.                 that.carousel('prev');
  17.               }else if (endX < -10){
  18.                 $(this).off('touchmove');
  19.                 that.carousel('next');
  20.               }
  21.               return false;
  22.             }
  23.           });
  24.       });
  25.       $(document).on('touchend',function(){
  26.         $(this).off('touchmove');
  27.       });
  28.     }
  29.   </script>
复制代码
需要注意:将以上代码与其他插件代码一起打包时,可能会造成该代码失效,可以指定打包顺序或将该代码单独提出来。
https://blog.csdn.net/sinat_41292836/article/details/90377873
您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|Archiver|手机版|小黑屋|大错站长论坛

GMT+8, 2020-6-6 16:17 , Processed in 0.046874 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表