安装:
npm install vue-awesome-swiper@3 --save-dev
main.js
import VueAwesomeSwiper from ‘vue-awesome-swiper’
Vue.use(VueAwesomeSwiper)
页面 多个swiper
<swiper ref="mySwiper" :options="swiperOptionsone" v-if='banner_list.length>0'>
<swiper-slide v-for="(item,index) in banner_list" :key="item.id" >
<img :src="item.url" @click="push_more(item.id)">
</swiper-slide>
</swiper>
<swiper ref="mySwipertow" :options="swiperOptions" v-if='ptho.length>0'>
<swiper-slide v-for="(item,index) in ptho" :key="item.id" >
<img :src="item">
</swiper-slide>
</swiper>
页面引入
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
页面注册
components:{
swiper,
swiperSlide,
}
配置项:
swiperOptionsone: {
loop: true,
autoplay: {
delay:3000,
stopOnLastSlide: true,
disableOnInteraction: true
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next1",
prevEl: ".swiper-button-prev1"
}
},
swiperOptions: {
loop: true,
autoplay: {
delay:3000,
stopOnLastSlide: true,
disableOnInteraction: true
},
// 设置点击箭头
navigation: {
nextEl: ".swiper-button-next2",
prevEl: ".swiper-button-prev2"
}
},