feat: 增加轮播

components/SwiperFlip.vue

@@ -1,7 +1,7 @@
 <template>
   <ClientOnly>
     <div class="swiper-card-container">
-      <swiper-container ref="containerRef" :init="false" :effect="'coverflow'">
+      <swiper-container ref="containerRef" :init="false">
         <slot></slot>
       </swiper-container>
       <div class="swiper-cards-prev"></div>
@@ -12,6 +12,7 @@
 
 <script setup>
 const containerRef = ref(null)
+
 useSwiper(containerRef, {
   effect: 'cards',
   grabCursor: true,
@@ -22,7 +23,10 @@ useSwiper(containerRef, {
     slideShadows: true,
     perSlideOffset: 8,
   },
-
+  autoplay: {
+    delay: 2500,
+    disableOnInteraction: false,
+  },
   pagination: {
     el: '.swiper-pagination',
     clickable: true,

pages/index.vue

@@ -157,9 +157,47 @@ function updateOnSelect() {
   // state.canScrollNext = embla.value.canScrollNext()
 }
 onMounted(() => {
-  embla.value = EmblaCarousel(emblaNode.value, { loop: true })
+  embla.value = EmblaCarousel(emblaNode.value, { loop: true }, [createAutoplay(4000)])
   embla.value.on('select', updateOnSelect)
 })
+
+function createAutoplay(delay = 4000) {
+  let embla: any = null
+  let timer: any = null
+
+  function autoplay() {
+    stop()
+    if (!embla) return
+    timer = setInterval(() => {
+      if (!embla) return
+      if (!embla.canScrollNext()) {
+        embla.scrollTo(0) // 回到第一张
+      } else {
+        embla.scrollNext()
+      }
+    }, delay)
+  }
+
+  function stop() {
+    if (timer) clearInterval(timer)
+  }
+
+  return {
+    name: 'autoplay',
+    options: {},
+    init(emblaApi: any) {
+      embla = emblaApi
+      autoplay()
+      embla.on('pointerDown', stop)
+      embla.on('pointerUp', autoplay)
+      embla.on('destroy', stop)
+    },
+    destroy() {
+      stop()
+      embla = null
+    },
+  }
+}
 </script>
 
 <style>