vue3中使用swiper6實現輪播

vue用的3.0版本，swiper用的swiper6

模板html代碼

<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>

js代碼

import {reactive,ref} from 'vue';
// 使用swiper的compositon API
import SwiperCore, {Autoplay,Pagination} from 'swiper';
import {Swiper,SwiperSlide} from 'swiper/vue';
import 'swiper/swiper.min.css';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([Autoplay,Pagination]);
export default {
	name:'Home',
	components:{
	      Swiper,
	      SwiperSlide,
	},
	setup() {
                // swiper相關配置屬性放在swiper_options這個變量里
		let swiper_options = reactive({
			autoplay:{
				delay:3000,
				disableOnInteraction: false
			},
			loop:true,
			speed:1000,	
			pagination:{
				clickable: true
			}
		})
                // 將swiper_options返回給模板中的swiper組件使用
		return {swiper_options};
	}
}