test dynamic image

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

@@ -0,0 +1,180 @@
+[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="image-carousel-container">
+  <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>
+</div>
+
+<script>
+var swiper = new Swiper('.swiper-container', {
+  // 确保一次只显示一张幻灯片
+  slidesPerView: 1,
+  slidesPerGroup: 1,
+  spaceBetween: 0,
+
+  // 循环播放
+  loop: true,
+
+  // 自动播放设置
+  autoplay: {
+    delay: 4000, // 4秒切换
+    disableOnInteraction: false,
+  },
+
+  // 分页器
+  pagination: {
+    el: '.swiper-pagination',
+    clickable: true,
+    dynamicBullets: true,
+  },
+
+  // 导航按钮
+  navigation: {
+    nextEl: '.swiper-button-next',
+    prevEl: '.swiper-button-prev',
+  },
+
+  // 切换效果 - 使用淡入淡出而不是滑动
+  effect: 'fade',
+  fadeEffect: {
+    crossFade: true
+  },
+
+  // 速度控制
+  speed: 800,
+});
+</script>
+
+<style>
+/* 容器样式 - 限制宽度不遮挡导航栏 */
+.image-carousel-container {
+  max-width: 75%;
+  margin: 20px auto;
+  padding: 0 15px;
+}
+
+.swiper-container {
+  width: 100%;
+  height: 400px;
+  border-radius: 8px;
+  overflow: hidden; /* 确保内容不会溢出 */
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+/* 确保每个幻灯片占据整个容器 */
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 6px;
+}
+
+/* 淡入淡出效果增强 */
+.swiper-container-fade .swiper-slide {
+  pointer-events: none;
+}
+.swiper-container-fade .swiper-slide-active {
+  pointer-events: auto;
+}
+
+/* 导航按钮样式 */
+.swiper-button-next,
+.swiper-button-prev {
+  background-color: rgba(255,255,255,0.8);
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  color: #333;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  transition: all 0.3s ease;
+}
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.swiper-button-next:hover,
+.swiper-button-prev:hover {
+  background-color: rgba(255,255,255,0.95);
+  transform: scale(1.05);
+}
+
+/* 分页器样式 */
+.swiper-pagination {
+  bottom: 15px !important;
+}
+
+.swiper-pagination-bullet {
+  width: 10px;
+  height: 10px;
+  background: #fff;
+  opacity: 0.7;
+  transition: all 0.3s ease;
+}
+
+.swiper-pagination-bullet-active {
+  background: #007bff;
+  opacity: 1;
+  transform: scale(1.2);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .image-carousel-container {
+    max-width: 95%;
+    padding: 0 10px;
+  }
+
+  .swiper-container {
+    height: 300px;
+  }
+
+  .swiper-button-next,
+  .swiper-button-prev {
+    width: 36px;
+    height: 36px;
+  }
+
+  .swiper-button-next:after,
+  .swiper-button-prev:after {
+    font-size: 16px;
+  }
+}
+</style>
+++++