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

  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,
  });
});