vue3中使用swiper6實現輪播
阿新 • • 發佈:2021-01-03
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}; } }