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

2017-05-27  本文已影响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>

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

上一篇下一篇

猜你喜欢

热点阅读