.swiper-container
  .swiper-wrapper
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/1` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/2` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/3` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/4` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/5` alt)
    .swiper-slide
      img(src=`https://satyr.dev/300x1:1/6` alt)
  .swiper-button-prev
  .swiper-button-next
      
script(src="https://unpkg.com/swiper/swiper-bundle.min.js")

@import "https://unpkg.com/swiper/swiper-bundle.min.css";

.swiper-container {
  margin: 0 auto;
  max-width: 980px;
  text-align: center;
}

document.querySelectorAll('.swiper-slide img').forEach((el, i) => {
  el.addEventListener('click', () => {
    alert(i + 1);
  });
});

new Swiper('.swiper-container', {
  slidesPerView: 3,
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});