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

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 7/8/18.

  1. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,237
    Đã được thích:
    936
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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.

    bootstrap-carousel-slider-swipe-mobile-luot-tren-mobi.jpg

    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.
    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>
    
     
    Cảm ơn đã xem bài:

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

    danh sách diễn đàn rao vặt gov chất lượng


Chủ để tương tự : Bootstrap Carousel
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Tắt tự động chạy slider Stop Autoplay Bootstrap Carousel slider như thế nào 7/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Fixed Menu top navbar in bootstrap, cố định menu khi scrolling kéo xuống dưới 27/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap 13/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap 5/5/17
Ngôn ngữ lập trình CSS, HTML, HTML5 Hướng dẫn chuyển psd thành html dùng bootstrap 13/5/15

Like và Share ủng hộ ITSEOVN