From 361ef45a0f26fc0fbc28ba6de7ac9adcb143a5ab Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 22 Dec 2024 00:11:21 +0800
Subject: [PATCH] fix(theme): fix carousel swiper that stops unexpectedly
 during appearance switching (#385)

---
 .../src/client/features/components/Swiper.vue | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/theme/src/client/features/components/Swiper.vue b/theme/src/client/features/components/Swiper.vue
index a0185377..f69a5e20 100644
--- a/theme/src/client/features/components/Swiper.vue
+++ b/theme/src/client/features/components/Swiper.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AutoplayOptions, SwiperModule, Swiper as SwiperType } from 'swiper/types'
+import { useMutationObserver } from '@vueuse/core'
 import {
   Autoplay,
   EffectCards,
@@ -13,7 +14,7 @@ import {
   Pagination,
 } from 'swiper/modules'
 import { Swiper, SwiperSlide } from 'swiper/vue'
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 
 import 'swiper/css'
 import 'swiper/css/navigation'
@@ -128,12 +129,26 @@ const hasNavigation = computed(() =>
   props.mode === 'banner' || props.mode === 'broadcast' ? props.navigation : false,
 )
 
-function onSwiper(swiper: SwiperType) {
+let swiper: SwiperType
+function onSwiper(_swiper: SwiperType) {
+  swiper = _swiper
   if (props.mode === 'carousel' && props.pauseOnMouseEnter) {
-    swiper.el.onmouseenter = () => swiper.autoplay.stop()
-    swiper.el.onmouseleave = () => swiper.autoplay.start()
+    swiper.el.onmouseenter = () => swiper!.autoplay.stop()
+    swiper.el.onmouseleave = () => swiper!.autoplay.start()
   }
 }
+
+onMounted(() => {
+  if (props.mode === 'carousel' && !props.pauseOnMouseEnter) {
+    useMutationObserver(() => document.documentElement, () => {
+      if (!swiper)
+        return
+
+      swiper.wrapperEl.style.transform = 'translate3d(0px, 0px, 0px)'
+      setTimeout(() => swiper.update(), 350)
+    }, { attributeFilter: ['data-theme'] })
+  }
+})
 </script>
 
 <template>