引入swiper

package.json

@@ -10,8 +10,9 @@
   },
   "dependencies": {
     "autoprefixer": "^10.4.14",
-    "postcss-px-to-viewport": "^1.1.1",
     "pinia": "^2.0.32",
+    "postcss-px-to-viewport": "^1.1.1",
+    "swiper": "^9.3.2",
     "vue": "^3.2.45",
     "vue-router": "^4.0.13"
   },

src/components/Swiper.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="swiper_container">
+    <swiper
+      :slidesPerView="1"
+      :spaceBetween="0"
+      :loop="true"
+      :pagination="{
+        clickable: true,
+      }"
+      :navigation="true"
+      :modules="modules"
+      class="mySwiper"
+    >
+      <swiper-slide>Slide 1</swiper-slide>
+      <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
+      <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
+      <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
+      <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
+    </swiper>
+  </div>
+</template>
+
+<script setup>
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from 'swiper/vue'
+
+// Import Swiper styles
+import 'swiper/css'
+
+import 'swiper/css/pagination'
+import 'swiper/css/navigation'
+import { Pagination, Navigation } from 'swiper'
+const modules = [Pagination, Navigation]
+</script>
+
+<style>
+.swiper_container {
+  width: 100vw;
+  height: 100vw;
+  background: #000;
+}
+</style>

src/pages/index.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home_container">
+    <Swiper />
     <Summarize />
     <CaseShow />
     <MechanicalDrive />
@@ -13,6 +14,7 @@
 </template>
 
 <script setup>
+import Swiper from 'cpns/Swiper'
 import Summarize from 'cpns/Summarize'
 import CaseShow from 'cpns/CaseShow'
 import MechanicalDrive from 'cpns/MechanicalDrive'

src/style.scss

@@ -0,0 +1,13 @@
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide {
+  background: #fff;
+}
+
+.swiper {
+  margin-left: auto;
+  margin-right: auto;
+}

yarn.lock

@@ -537,11 +537,23 @@ sourcemap-codec@^1.4.8:
   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
+ssr-window@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmmirror.com/ssr-window/-/ssr-window-4.0.2.tgz#dc6b3ee37be86ac0e3ddc60030f7b3bc9b8553be"
+  integrity sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+swiper@^9.3.2:
+  version "9.3.2"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-9.3.2.tgz#f29eddb17f231221c7727372637c44279174a4e1"
+  integrity sha512-Kj9Z4kXRmJR3YT/Wj+XLWj8P6IcRt+WG38uL8M3/Wny7+6sV0TlP9vnE1X+Co9c7VzNooojWGnFa+Wf/9+CUMA==
+  dependencies:
+    ssr-window "^4.0.2"
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"