vue3 使用swiper6

安裝 npm i swiper

<swiper :autoplay="swiper_options.autoplay" :loop="swiper_options.loop" :speed="swiper_options.speed" :pagination="swiper_options.pagination">
    <swiper-slide><img src="@/assets/img/ce0752e83e81a006.jpg" alt=""></swiper-slide>
<swiper-slide><img src="@/assets/img/9c7efaa9adbea26f.jpg" alt=""></swiper-slide>
</swiper>

import {reactive,ref} from 'vue';

// 使用swiper的compositon API

import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Autoplay]);

export default {
  name:'Home',
  components:{
    Swiper,
    SwiperSlide,
  },
  setup() {
    // swiper相關配置屬性放在swiper_options這個變量里
    let swiper_options = reactive({
      autoplay:{
        delay:3000,
        disableOnInteraction: false
      },
      loop:true,
      speed:500,
      pagination:{
        clickable: true
      }
    })
    // 將swiper_options返回給模板中的swiper組件使用
    return {swiper_options};
  }
}