Update dynamic.adoc

Author: NotHimmel

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

@@ -4,29 +4,25 @@
 <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 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>
+    <!-- 分页器 -->
+    <div class="swiper-pagination"></div>
+    <!-- 导航按钮 -->
+    <div class="swiper-button-next"></div>
+    <div class="swiper-button-prev"></div>
   </div>
-  <!-- 分页器 -->
-  <div class="swiper-pagination"></div>
-  <!-- 导航按钮 -->
-  <div class="swiper-button-next"></div>
-  <div class="swiper-button-prev"></div>
 </div>
 
 <script>
@@ -48,15 +44,63 @@ var swiper = new Swiper('.swiper-container', {
 </script>
 
 <style>
+/* 容器样式 - 限制宽度不遮挡导航栏 */
+.image-carousel-container {
+  max-width: 75%; /* 调整为适合的宽度 */
+  margin: 20px auto;
+  padding: 0 15px;
+}
+
 .swiper-container {
   width: 100%;
-  height: 400px;
-  margin: 20px 0;
+  height: 350px; /* 稍微降低高度 */
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
 }
+
 .swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: 6px;
+}
+
+/* 响应式设计 - 在小屏幕上全宽度 */
+@media (max-width: 768px) {
+  .image-carousel-container {
+    max-width: 100%;
+    padding: 0 10px;
+  }
+  
+  .swiper-container {
+    height: 300px;
+  }
+}
+
+/* 导航按钮样式调整 */
+.swiper-button-next,
+.swiper-button-prev {
+  background-color: rgba(255,255,255,0.7);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  color: #333;
+}
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
+  font-size: 18px;
+}
+
+/* 分页器样式 */
+.swiper-pagination-bullet {
+  background: #fff;
+  opacity: 0.7;
+}
+
+.swiper-pagination-bullet-active {
+  background: #007bff;
+  opacity: 1;
 }
 </style>
 ++++