Cách tạo slider chạy siêu mượt trên flatsome
  1. Home
  2. Code hay
  3. Cách tạo slider chạy siêu mượt trên flatsome
Đàm Thìn 4 tuần trước

Cách tạo slider chạy siêu mượt trên flatsome

Bạn đã từng tạo slider trên Flatsome và gặp phải tình trạng giật giật khi chạy? Bài viết này sẽ hướng dẫn bạn cách tạo Slider chạy siêu mượt trên Flatsome.

Tạo Slider Chạy Siêu Mượt Trên Flatsome

Để tạo được slider như bạn vừa thấy ở trên, bạn cần trải qua 2 bước sau:

  1. Tạo row sliderchèn hình slider cần chạy trong chế độ UX Builder của Flatsome
  2. Copy và paste code JS và CSS vào file function của bạn

Bước 1: Tạo row slider và chèn hình slider

Sử dụng element row trong UX Builder và chọn số col tùy ý. Sau đó, thêm class slider-chay-muot slider row-slider large-columns-4 xlarge-columns-4 để tạo slider chạy mượt. Bạn có thể tuỳ chỉnh số cột hiển thị bằng cách thay đổi số trong class này.

Bước 2: Copy và paste code JS và CSS vào file function

Copy đoạn code JS và CSS sau và paste vào file function trong phần Giao diện > Theme file editer > chọn file function.php của bạn.

function chen_js_slider_chay_muot_abweb() {
    <script type="text/javascript" src="https://unpkg.com/flickity@2.2.1/dist/flickity.pkgd.min.js" id="wp-hooks-js"></script>
    <script>
        let tocdo = 2;
        let flickity_chay = null;
        let trang_thai_dung_lai = false;
        const class_slider_chay = document.querySelector('.slider-chay-muot');

        if (class_slider_chay) {
            const cap_nhat_slider = () => {
                if (trang_thai_dung_lai) return;
                if (flickity_chay.slides) {
                    flickity_chay.x = (flickity_chay.x - tocdo) % flickity_chay.slideableWidth;
                    flickity_chay.selectedIndex = flickity_chay.dragEndRestingSelect();
                    flickity_chay.updateSelectedSlide();
                    flickity_chay.settle(flickity_chay.x);
                }
                window.requestAnimationFrame(cap_nhat_slider);
            };

            const dung_lai = () => {
                trang_thai_dung_lai = true;
            };

            const play = () => {
                if (trang_thai_dung_lai) {
                    trang_thai_dung_lai = false;
                    window.requestAnimationFrame(cap_nhat_slider);
                }
            };

            flickity_chay = new Flickity(class_slider_chay, {
                autoPlay: false,
                prevNextButtons: true,
                pageDots: false,
                draggable: true,
                wrapAround: true,
                selectedAttraction: 0.015,
                friction: 0.25
            });

            flickity_chay.x = 0;

            class_slider_chay.addEventListener('mouseenter', dung_lai, false);
            class_slider_chay.addEventListener('focusin', dung_lai, false);
            class_slider_chay.addEventListener('mouseleave', play, false);
            class_slider_chay.addEventListener('focusout', play, false);

            flickity_chay.on('dragStart', () => {
                trang_thai_dung_lai = true;
            });

            cap_nhat_slider();
        }
    </script>
}
add_action('wp_footer', 'chen_js_slider_chay_muot_abweb');

Kết luận

Với cách tạo slider chạy siêu mượt trên Flatsome, bạn sẽ có ngay một trình chiếu ảnh vô cùng mượt mà. Đổi mới giao diện website của bạn và tạo ấn tượng mạnh mẽ với slider này!

27 lượt xem | 0 bình luận
Tôi chia sẻ hết kiến thức cho bạn với những gì tôi có
Chúng tôi là HƯỚNG DẪN SỬ DỤNG chúng tôi chia sẻ các kiến thức, kinh nghiệm sử dụng miễn phí để mọi người có thể tự học và tìm hiểu 1 cách dễ dàng nhất.

Chức năng bình luận hiện chỉ có thể hoạt động sau khi bạn đăng nhập!

Bình luận