美文网首页
让Bootstrap的Carousel在移动端支持滑动切换

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

作者: 守心向暖 | 来源:发表于2017-05-27 14:50 被阅读0次

    (网络转载)移动端使用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>
    

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

    相关文章

      网友评论

          本文标题:让Bootstrap的Carousel在移动端支持滑动切换

          本文链接:https://www.haomeiwen.com/subject/zocqfxtx.html