66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
window.addEventListener('DOMContentLoaded', (event) => {
|
|
const cardThematiques = document.querySelectorAll('.swiper-slide .card-thematique');
|
|
|
|
function swiperCheckBreakpoints() {
|
|
const hasSwiper = thematiquesSwiper.__swiper__ === true;
|
|
|
|
if (window.innerWidth < 960 && hasSwiper) {
|
|
thematiquesSwiper.destroy(true, true);
|
|
}
|
|
if (window.innerWidth >= 960 && !hasSwiper) {
|
|
initiateSwiper();
|
|
}
|
|
}
|
|
|
|
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,
|
|
},
|
|
// 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,
|
|
});
|
|
}
|
|
initiateSwiper();
|
|
swiperCheckBreakpoints();
|
|
|
|
window.addEventListener('resize', swiperCheckBreakpoints);
|
|
});
|