68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
function swiperCheckBreakpoints() {
|
|
const hasSwiper = thematiquesSwiper.__swiper__ === true;
|
|
|
|
if (window.innerWidth < 960 && hasSwiper) {
|
|
thematiquesSwiper.destroy(true, true);
|
|
}
|
|
if (window.innerWidth >= 960 && !hasSwiper) {
|
|
initiateSwiper();
|
|
}
|
|
}
|
|
|
|
function initiateSwiper() {
|
|
const cardThematiques = document.querySelectorAll(".swiper-slide .card-thematique");
|
|
|
|
if (!Swiper) return;
|
|
|
|
thematiquesSwiper = new Swiper(".swiper-container", {
|
|
grabCursor: false,
|
|
slidesPerView: 3,
|
|
spaceBetween: 30,
|
|
a11y: {
|
|
enabled: true,
|
|
prevSlideMessage: textTranslations.previousSlide,
|
|
nextSlideMessage: textTranslations.nextSlide,
|
|
slideRole: "",
|
|
slideLabelMessage: textTranslations.slideLabel,
|
|
},
|
|
// loop: true,
|
|
// centeredSlides: true,
|
|
keyboard: {
|
|
enabled: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".thematique-button-next",
|
|
prevEl: ".thematique-button-prev",
|
|
},
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true,
|
|
renderBullet: function (index, className) {
|
|
const ariaLabel = cardThematiques[index].getAttribute("data-taxonomy");
|
|
|
|
// return `<button class="${className}" aria-label="${ariaLabel}"></button>`;
|
|
return `<div class="${className}" test tabindex="-1" aria-label="Aller à la slide ${index}"></div>`;
|
|
},
|
|
},
|
|
breakpoints: {
|
|
// when window width is >= 320px
|
|
|
|
// when window width is >= 480px
|
|
320: {
|
|
slidesPerView: 2,
|
|
},
|
|
// when window width is >= 640px
|
|
1100: {
|
|
slidesPerView: 3,
|
|
},
|
|
},
|
|
// a11y: false,
|
|
});
|
|
}
|
|
window.addEventListener("DOMContentLoaded", (event) => {
|
|
initiateSwiper();
|
|
swiperCheckBreakpoints();
|
|
|
|
window.addEventListener("resize", swiperCheckBreakpoints);
|
|
});
|