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>