window.addEventListener('DOMContentLoaded', (event) => {
  const cardThematiques = document.querySelectorAll('.swiper-slide  .card-thematique');

  mySwiper = new Swiper('.swiper-container', {
    grabCursor: false,
    slidesPerView: 3,
    spaceBetween: 30,
    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>`;
      },
    },
    a11y: false,
  });
});