123

src/views/Index/components/CaseDetails/index.vue

@@ -24,6 +24,11 @@
                   :pagination="pagination"
                   :modules="modules"
                   :autoHeight="true"
+                  :loop="true"
+                  :autoplay="{
+                    delay: 3000,
+                    disableOnInteraction: false,
+                  }"
                   class="case_detail_swiper"
                 >
                   <swiper-slide
@@ -113,7 +118,7 @@ import { ref, onMounted } from 'vue'
 import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Pagination } from 'swiper'
+import { Pagination, Autoplay } from 'swiper'
 import { case_detail_list } from '@/mock/case'
 import { useDetailStore, useSwiperStore } from '@/store'
 import { storeToRefs } from 'pinia'
@@ -127,7 +132,7 @@ import Tabs from 'cpns/Tabs'
 import Trumbs from 'cpns/Trumbs'
 import Intro from 'cpns/Intro'
 const showEmpty = ref(true)
-const modules = ref([Pagination])
+const modules = ref([Pagination, Autoplay])
 const detailStore = useDetailStore()
 const swiperStore = useSwiperStore()
 const { industry_id, example_id } = storeToRefs(detailStore)

src/views/Index/components/HardwareDetails/index.vue

@@ -24,6 +24,11 @@
                   :pagination="pagination"
                   :modules="modules"
                   :autoHeight="true"
+                  :loop="true"
+                  :autoplay="{
+                    delay: 3000,
+                    disableOnInteraction: false,
+                  }"
                   class="case_detail_swiper"
                 >
                   <swiper-slide
@@ -114,7 +119,7 @@ import { ref, onMounted } from 'vue'
 import { handleScreenAuto, handleScreenToFlexCenter } from '@/common/utils'
 // Import Swiper Vue.js components
 import { Swiper, SwiperSlide } from 'swiper/vue'
-import { Pagination } from 'swiper'
+import { Pagination, Autoplay } from 'swiper'
 import { hardware_list } from '@/mock/hardware'
 import { useDetailStore, useSwiperStore } from '@/store'
 import { storeToRefs } from 'pinia'
@@ -128,7 +133,7 @@ import Tabs from 'cpns/Tabs'
 import Trumbs from 'cpns/Trumbs'
 import Intro from 'cpns/Intro'
 const showEmpty = ref(true)
-const modules = ref([Pagination])
+const modules = ref([Pagination, Autoplay])
 const detailStore = useDetailStore()
 const swiperStore = useSwiperStore()
 const { hardware_id, hardwareExampleId } = storeToRefs(detailStore)

src/views/Index/index.vue

@@ -30,13 +30,13 @@
     <swiper-slide key="3" virtualIndex="3" class="swiper-no-swiping">
       <CasePictureList />
     </swiper-slide>
-    <swiper-slide key="4" virtualIndex="4" class="swiper-no-swiping">
+    <swiper-slide key="4" virtualIndex="4">
       <CaseDetails />
     </swiper-slide>
     <swiper-slide key="5" virtualIndex="5" class="swiper-no-swiping">
       <HardwareSummary />
     </swiper-slide>
-    <swiper-slide key="6" virtualIndex="6" class="swiper-no-swiping">
+    <swiper-slide key="6" virtualIndex="6">
       <HardwareDetails />
     </swiper-slide>
     <swiper-slide key="7" virtualIndex="7" class="swiper-no-swiping">