首先先装下依赖
npm install swiper vue-awesome-swiper --save
在main.js里进行全局引入
//swiper
import VueAwesomeSwiper from "vue-awesome-swiper"
Vue.use(VueAwesomeSwiper)
//Swiper 6.0版本后要单独引用Navigation, Pagination, EffectFade, Autoplay
import Swiper, {
Navigation, Pagination, EffectFade, Autoplay } from 'swiper'
Swiper.use([Navigation, Pagination, EffectFade, Autoplay])
使用方法就是这样啦
<swiper
:options="{
slidesPerView:2,//一次展示几个
spaceBetween: 30,//间隔距离
speed:800,//滑动速度
loop: true,//循环轮播
autoplay: {
//自动轮播
delay: 3000,
disableOnInteraction: false,
},
navigation: {
//左右切换
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
//指示器
el: '.swiper-pagination',
dynamicBullets: true,//动态圆点
clickable: true,
},
}"
>
<swiper-slide v-for="(item,index) in dataList" :key="index+''">
<div class="player-box" >
<img :src="item.src" alt="" />
<h3 class="title"
:style="componentProps.option.titleStyle"
:class="componentProps.option.align=='flex-end'?'title-r':componentProps.option.align=='center'?'title-c':''"
v-if="componentProps.option.showLabel"
>{
{
item.text }}</h3>
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination" v-if="componentProps.option.showPagination"></div>
<div class="swiper-button-prev" slot="button-prev" v-if="componentProps.option.showNavigation"></div>
<div class="swiper-button-next" slot="button-next" v-if="componentProps.option.showNavigation"></div>
</swiper>
swiper 中options的配置项也可以放在data里面呦,更多配置可以官网去查看