From 5e6e1fdd8b375298fda541f8e63fba689cea78e3 Mon Sep 17 00:00:00 2001
From: aka <125674614+zhen-shi@users.noreply.github.com>
Date: Sat, 2 Mar 2024 22:19:07 +0800
Subject: [PATCH] feat(shortcode): image loop

---
 assets/scss/custom.scss         | 18 ++++++++++++++++
 layouts/shortcodes/imgloop.html | 37 +++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 layouts/shortcodes/imgloop.html

diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
index 58ce604..d9932fd 100644
--- a/assets/scss/custom.scss
+++ b/assets/scss/custom.scss
@@ -121,4 +121,22 @@
                 }
             }
         }
+    }
+
+    .swiper-container {
+        max-width: 820px;
+        margin: 2em auto;
+    
+    }
+    .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        background-color: #fff;
+        /* Center slide text vertically */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img {
+            margin: 0 !important;
+        }
     }
\ No newline at end of file
diff --git a/layouts/shortcodes/imgloop.html b/layouts/shortcodes/imgloop.html
new file mode 100644
index 0000000..215e4a9
--- /dev/null
+++ b/layouts/shortcodes/imgloop.html
@@ -0,0 +1,37 @@
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
+<!-- Swiper -->
+<div class="swiper-container">
+    <div class="swiper-wrapper">
+        {{$itItems := split (.Get 0) ","}}
+        {{range $itItems }}
+        <div class="swiper-slide">
+            <img src="{{.}}" alt="">
+        </div>
+        {{end}}
+    </div>
+    <!-- Add Pagination -->
+    <div class="swiper-pagination"></div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
+    <!-- Initialize Swiper -->
+    <script>
+    var swiper = new Swiper('.swiper-container', {
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+    //自动调节高度
+    autoHeight: true,
+    //键盘左右方向键控制
+    keyboardControl : true,
+    //鼠标滑轮控制
+    mousewheelControl : true,
+    //自动切换
+    autoplay : 5000,
+    //懒加载
+    lazyLoading : true,
+    lazyLoadingInPrevNext : true,
+    //无限循环
+    loop : true,
+    });
+    </script>