npm i vue-awesome-swiper -s
在main.js中
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper);
在所需要的页面中
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from "vue-awesome-swiper";
<swiper :options="swiperBanner">
<div class="swiper-slide">
<img src="../assets/img/1.png" alt>
</div>
<div class="swiper-slide">
<img src="../assets/img/2.png" alt>
</div>
<div class="swiper-slide">
<img src="../assets/img/3.png" alt>
</div>
<div class="swiper-slide">
<img src="../assets/img/4.png" alt>
</div>
</swiper>
<!-- 或者这样的html -->
<swiper :options="swiperBanner" v-if="lunboArr.length>0">
<div class="swiper-slide" v-for="item in lunboArr" :key="item.id">
<a :href="item.url">
<img :src="item.img" alt>
</a>
</div>
</swiper>
data() {
return {
swiperBanner: {
loop: true, // 循环模式选项
speed: 1000,
autoplay: true,
autoplayDisableOnInteraction: false
}
};
},
components: {
swiper,
swiperSlide
},