test dynamic image

Author: NotHimmel

CN/modules/ROOT/pages/v4.6/dynamic.adoc

@@ -0,0 +1,62 @@
+[source,html]
+++++
+<!-- 引入Swiper库 -->
+<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
+<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+
+<div class="swiper-container">
+  <div class="swiper-wrapper">
+    <div class="swiper-slide">
+      <img src="https://picsum.photos/800/400?random=1" alt="风景图片1">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://picsum.photos/800/400?random=2" alt="风景图片2">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://picsum.photos/800/400?random=3" alt="风景图片3">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://picsum.photos/800/400?random=4" alt="风景图片4">
+    </div>
+    <div class="swiper-slide">
+      <img src="https://picsum.photos/800/400?random=5" alt="风景图片5">
+    </div>
+  </div>
+  <!-- 分页器 -->
+  <div class="swiper-pagination"></div>
+  <!-- 导航按钮 -->
+  <div class="swiper-button-next"></div>
+  <div class="swiper-button-prev"></div>
+</div>
+
+<script>
+var swiper = new Swiper('.swiper-container', {
+  loop: true,
+  autoplay: {
+    delay: 3000,
+    disableOnInteraction: false,
+  },
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+  },
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+});
+</script>
+
+<style>
+.swiper-container {
+  width: 100%;
+  height: 400px;
+  margin: 20px 0;
+}
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>
+++++