https://www.swiper.com.cn/
Install
npm install swiper vue-awesome-swiper --save
局部引用:
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
components: {
Swiper,
SwiperSlide
},
data(){
return {
swiperOptions:{ //所有参数设置
autoplay:true, //自动播放
loop:true, //是否循环
effect : 'cube', //切换效果
cubeEffect: { //切换效果的参数设置
slideShadows: true,
shadow: true,
shadowOffset: 100,
shadowScale: 0.6
},
pagination: { //分页情况,点击小圆点可切换轮播页面
el: '.swiper-pagination',
clickable :true
},
navigation: { //点击< > 可切换页面
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
},
slideList:[ //遍历的数组
{id:'1',
img:'/imgs/slider/slide-1.jpg'
},{id:'2',
img:'/imgs/slider/slide-2.jpg'
}]
}
}
}
<swiper :options="swiperOptions">
<swiper-slide v-for="item in slideList" :key="item.id">
<a :href="'/#/product/'+item.id">
<img :src="item.img">
</a>
</swiper-slide>
<!-- 如果需要分页器 slot是插槽-->
<div class="swiper-pagination" slot="pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>