Thứ Hai, 28 tháng 4, 2025

Swiper vòng lặp desktop + Mobi

document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.swiper, .swiper2, .swiper3, .swiper4, .swiper5, .swiper6').forEach(slider => {

        let options = {};


        const className = Array.from(slider.classList).find(c => c.startsWith('swiper'));

        const delay = (className === 'swiper6') ? 10000 : 3000;


        // Swiper chính (có pagination)

        if (className === 'swiper') {

            options = {

                loop: true,

                navigation: {

                    nextEl: '.swiper-button-next',

                    prevEl: '.swiper-button-prev',

                },

                pagination: {

                    el: '.swiper-pagination',

                    clickable: true,

                },

                autoplay: {

                    delay: delay,

                    disableOnInteraction: false,

                }

            };

        } else {

            // Breakpoints mặc định

            let customBreakpoints = {

                0: { slidesPerView: 2 },

                576: { slidesPerView: 3 },

                768: { slidesPerView: 4 },

                992: { slidesPerView: 6 },

            };


            // Riêng swiper3 và swiper4: mobile chỉ 1 slide

            // if (className === 'swiper3' || className === 'swiper4') {


            if (className === 'swiper4') {

                customBreakpoints[0] = { slidesPerView: 1 };

            }


            options = {

                slidesPerView: 6,

                spaceBetween: 20,

                loop: true,

                navigation: {

                    nextEl: `.${className} .swiper-button-next`,

                    prevEl: `.${className} .swiper-button-prev`,

                },

                autoplay: {

                    delay: delay,

                    disableOnInteraction: false,

                },

                breakpoints: customBreakpoints

            };

        }


        new Swiper(slider, options);

    });

}); 

Không có nhận xét nào:

Đăng nhận xét