• HOME
  • [nuxt3]ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件について
TomoyaOkada

[nuxt3]ページ遷移で入って来た時、SwiperAutoPlayが止まってしまう件について

記事をシェアする

あるページ内にSwiperを入れた所、ページ遷移で入ってきた時のみ自動再生が止まってしまう現象に遭遇しました。

状況

・ページ遷移で入ってきた時に自動再生が動かなくなる
・その場でリロードすると正常に動く
・特にエラーが出ている様子なし


解決策

以下の記事にヒントがあったので試した結果、正常に動作するようになりました。
参考サイト

refでSwiper表示のフラッグを作っておき、watchで入ってきたタイミングで表示させる処理を行うようです。

const showSwiper = ref<boolean>(false)

watch(
  () => router name,
  (newValue) => {
    if (newValue === 'router name') {
      showSwiper.value = true
    } else {
      showSwiper.value = false
    }
  },
  { immediate: true }
)


<div v-if="showSwiper">...</div>


SPA周りはこのような小さなところで躓きがちなので、相変わらず難しいですね。
ちなみにapp.vue(グローバル)に配置されるSwiperの自動再生は特別な処理をしなくても動きます。



記事をシェアする