(feat) Initial Draft

layouts/shortcodes/swiper.html

@@ -0,0 +1,64 @@
+{{ $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">
+    <!-- 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 }}"></div>
+  <div class="swiper-button-next swiper-button-next{{ $id }}"></div>
+</div>
+
+<style>
+.swiper-wrapper {
+  align-items: center;
+}
+
+.swiper-button-next:hover {
+  color:#fff;
+}
+
+.swiper-button-prev:hover {
+  color:#fff;
+}
+
+.swiper-pagination span{
+  background: #fff;
+}
+</style>
+
+<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>