{{ $images := .Page.Resources.Match (.Get "pattern") }}
{{ $id := .Get "id" }}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<!-- Slider main container -->
<div class="swiper swiper{{ $id }}">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper items-center">
    <!-- Slides -->
    {{ range $images }}
    <div class="swiper-slide swiper-slide{{ $id }}">
    <center>
      <img src="{{ (.Resize "x300").RelPermalink }}" class="my-0 rounded-md">
    </center>
    </div>
    {{ end }}

  </div>
  <!-- pagination -->
  <div class="swiper-pagination swiper-pagination{{ $id }}"></div>

  <!-- navigation buttons -->
  <div class="swiper-button-prev swiper-button-prev{{ $id }} hover:text-neutral"></div>
  <div class="swiper-button-next swiper-button-next{{ $id }} hover:text-neutral"></div>
</div>

<script>
  new Swiper('.swiper{{ $id }}', {
    direction: 'horizontal',
    centeredSlides: true,
    loop: true,
    spaceBetween: 10,
  
    pagination: {
      el: '.swiper-pagination{{ $id }}',
      clickable: true,
    },
  
    navigation: {
      nextEl: '.swiper-button-next{{ $id }}',
      prevEl: '.swiper-button-prev{{ $id }}',
    },
  });
</script>