Bootstrap Carousel Slider Swipe Mobile (Vuốt lướt trên mobi)

Bootstrap Carousel Slider Swipe Mobile (Vuốt lướt trên mobi) , mặc định của Bootstrap Carousel Slider trên mobi điện thoại di động sẽ không vuốt qua trái phải được, chỉ ấn next hoặc prev mới lướt trựt qua trái phải được, nhiều khi hơi bất tiện.

Để lướt được trên mobi với Bootstrap Carousel Slider bạn làm như dưới.



Cách 1: add code bắt sự kiện di chuyển trên màn hình để thực hiện lướt.

HTML:

<script>
$(".carousel").on("touchstart", function (event) {
    var xClick = event.originalEvent.touches[0].pageX;
    $(this).one("touchmove", function (event) {
        var xMove = event.originalEvent.touches[0].pageX;
        if (Math.floor(xClick - xMove) > 5) {
            $(this).carousel('next');
        }
        else if (Math.floor(xClick - xMove) < -5) {
            $(this).carousel('prev');
        }
    });
    $(".carousel").on("touchend", function () {
        $(this).off("touchmove");
    });
});
</script>

Cách 2: Tải thư viện jquery.mobile dành cho di động add vào web để sử dụng.

• Truy cập vào link sau: http://jquerymobile.com
• Tải jquery.mobile-x.x.x.js về máy cho vào web.

Sau đó add code sau vào phía sau của Carousel Slider của bạn.

HTML:

<script>
$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#myCarousel").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>