feat: 轮播图组件换用swiper

docs/.vitepress/components/ImgSlider.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="img-slider">
-    <Carousel :autoplay="2000" :wrap-around="true">
-      <Slide v-for="{ src, alt } of imgSliderList" :key="src">
-        <img class="carousel__item" :src="src" :alt="alt" />
-      </Slide>
-    </Carousel>
+    <Swiper :modules="modules" autoplay>
+      <template v-for="{ src, alt } of imgSliderList" :key="src">
+        <SwiperSlide>
+          <img :src="src" :alt="alt" />
+        </SwiperSlide>
+      </template>
+    </Swiper>
   </div>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
+import { Autoplay } from 'swiper'
+import { Swiper, SwiperSlide } from 'swiper/vue'
 import type { ImgSliderList } from '../types'
-
-import 'vue3-carousel/dist/carousel.css'
-import { Carousel, Slide } from 'vue3-carousel'
+import 'swiper/css'
 
 defineProps({
   imgSliderList: {
@@ -21,10 +23,6 @@ defineProps({
     required: true
   }
 })
-</script>
 
-<style scoped>
-.carousel__item {
-  width: 90%;
-}
-</style>
+const modules = [Autoplay]
+</script>

docs/.vitepress/components/Title.vue

@@ -29,4 +29,8 @@ const props = defineProps({
 })
 </script>
 
-<style scoped></style>
+<style scoped>
+.title {
+  text-align: center;
+}
+</style>

docs/project/ClipboardManager/index.md

@@ -36,6 +36,10 @@ navbar: false
 
 <Title v-bind="titleInfo" />
 
+<br />
+
+<ImgSlider :imgSliderList="imgSliders" />
+
 ## 🔰 开始使用
 
 **首次安装需要设置“跟随主程序同时启动”**
@@ -53,10 +57,6 @@ navbar: false
 - ✅ 优雅的界面动效与交互 跟随系统的深色模式
 - ✅ 优秀的剪贴板监听性能 强大的自定义功能按钮 自搭建多端同步 ···
 
-<ImgSlider :imgSliderList="imgSliders" />
-
---------
-
 ## 📚 安装方式
 
 - 官方插件市场安装