diff --git a/acf-blocks/home/show-thematiques/show-thematiques.js b/acf-blocks/home/show-thematiques/show-thematiques.js index d5e57c3..8ea6ba1 100644 --- a/acf-blocks/home/show-thematiques/show-thematiques.js +++ b/acf-blocks/home/show-thematiques/show-thematiques.js @@ -1,63 +1,65 @@ -window.addEventListener("DOMContentLoaded", (event) => { +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"); - function swiperCheckBreakpoints() { - const hasSwiper = thematiquesSwiper.__swiper__ === true; + if (!Swiper) return; - if (window.innerWidth < 960 && hasSwiper) { - thematiquesSwiper.destroy(true, true); - } - if (window.innerWidth >= 960 && !hasSwiper) { - initiateSwiper(); - } - } + 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"); - function initiateSwiper() { - thematiquesSwiper = new Swiper(".swiper-container", { - grabCursor: false, - slidesPerView: 3, - spaceBetween: 30, - a11y: { - enabled: true, - prevSlideMessage: textTranslations.previousSlide, - nextSlideMessage: textTranslations.nextSlide, - slideRole: "", - slideLabelMessage: textTranslations.slideLabel, + // return ``; + return `
`; }, - // 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"); + }, + breakpoints: { + // when window width is >= 320px - // return ``; - return `
`; - }, + // when window width is >= 480px + 320: { + slidesPerView: 2, }, - breakpoints: { - // when window width is >= 320px - - // when window width is >= 480px - 320: { - slidesPerView: 2, - }, - // when window width is >= 640px - 1100: { - slidesPerView: 3, - }, + // when window width is >= 640px + 1100: { + slidesPerView: 3, }, - // a11y: false, - }); - } + }, + // a11y: false, + }); +} +window.addEventListener("DOMContentLoaded", (event) => { initiateSwiper(); swiperCheckBreakpoints();