<template>
<div>
<div>
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide><img src='~mainassets/img/update/page1.png'/></swiper-slide>
<swiper-slide><img src='~mainassets/img/update/page2.png'/></swiper-slide>
</swiper>
</div>
</div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'
import SwiperCore, { Autoplay } from 'swiper'; // 关键 官网实例中没有这个,需要单独引入
SwiperCore.use([Autoplay]);
export default {
data() {
return {
swiperOptions: {
autoplay:true,
}
}
},
components: {
Swiper,
SwiperSlide
},
directives: {
swiper: directive
},
}
</script>
<style scoped>
</style>
vue项目使用swiper不轮播
最新推荐文章于 2023-08-16 19:47:22 发布