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

(网络转载)移动端使用Bootstrap的轮播Carousel插件支持滑动切换,添加以下代码:

<script type="text/javascript">
    var isTouch=('ontouchstart' in window);
    if(isTouch){
      $(".carousel").on('touchstart', function(e){
          var that=$(this);
          var touch = e.originalEvent.changedTouches[0];
          var startX = touch.pageX;
          var startY = touch.pageY;
          $(document).on('touchmove',function(e){
            touch = e.originalEvent.touches[0] ||e.originalEvent.changedTouches[0];
            var endX=touch.pageX - startX;
            var endY=touch.pageY - startY;
            if(Math.abs(endY)<Math.abs(endX)){
              if(endX > 10){
                $(this).off('touchmove');
                that.carousel('prev');
              }else if (endX < -10){
                $(this).off('touchmove');
                that.carousel('next');
              }
              return false;
            }
          });
      });
      $(document).on('touchend',function(){
        $(this).off('touchmove');
      });
    }
  </script>

需要注意:将以上代码与其他插件代码一起打包时,可能会造成该代码失效,可以指定打包顺序或将该代码单独提出来。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,053评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,269评论 4 61
  • 文|长山 (微信公众号:gongrongjie520) 既然我们已经享受过相聚的欢愉,为什么不能忍受离别的痛苦? ...
    长山日记阅读 3,957评论 0 6
  • 李笑来老师说“一字不差的阅读”是重要的能力,很多人不能做到达到一字不差的阅读。 初听觉着笑来老师说的对,以后读文章...
    山长说阅读 476评论 0 1
  • ——电影《怦然心动的人生整理魔法》观后小感 整理真的会改变人生吗? 最近发现,看书也是讲...
    二姐随行阅读 495评论 0 0