rewrote carousel

layouts/shortcodes/sliderOLD.html

@@ -0,0 +1,46 @@
+{{ $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>