search

clairechang0609 / hexo-board

0 stars 0 forks source link

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

Open utterances-bot opened 1 year ago

utterances-bot commented 1 year ago

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

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

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

Eacolt commented 1 year ago

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

clairechang0609 commented 1 year ago

如何获取该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>