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