Nuxt.js 3.x 套件應用－Swiper 製作輪播動畫 - Claire's Notes

[utterances-bot]

Nuxt.js 3.x 套件應用－Swiper 製作輪播動畫 - Claire's Notes

網站開發常使用到輪播功能，Swiper 是一款基於 Javascript 開發、功能完整、實用性高的輪播套件，接下來說明在 Nuxt3 專案搭配 nuxt-swiper 實作

https://clairechang.tw/2023/08/16/nuxt3/nuxt-v3-swiper/

[Eacolt]

如何获取该swiper实例？我需要调用swiper的方法该如何做呢？

[clairechang0609]

如何获取该swiper实例？我需要调用swiper的方法该如何做呢？

可以透過 v-on:swiper 或其他事件來取得 swiper 實體，並加以操作，範例程式碼如下：

<template>
  <Swiper @swiper="onSwiper" ...>
    ...
  </Swiper>
</template>

<script setup>
const swiperInstance = ref(null);
const onSwiper = instance => {
  swiperInstance.value = instance;
  swiperInstance.value.autoplay.start();
};
</script>