一、swiper及vue-awesome-swiper安装
注意，swiper版本不同，可能导致不同的bug出现，并且swiper与vue-awesome-swiper的版本要配套，本次使用的swiper版本是5.4.5， vue-awesome-swiper版本是4.1.11
npm install swiper@5.4.5 vue-awesome-swiper@4.1.1 --save
二、vue中使用
1.新建一个mySwiper组件
// html
<div class="thumb-container" id="cm-thumbs">
<swiper class="swiper gallery-top" :options="swiperOptionTop" v-if="imgLists.length" ref="swiperTop">
<swiper-slide v-for="(item, index) in imgLists" :key="item.id" @click.prevent="clickImg(item)">
<img :src="item.picUrl">
</swiper-slide>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
</swiper>
</div>
//js部分
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
//将以上组件进行注册
export default {
components:{
Swiper,
SwiperSlide
},
data(){
return {
imgLists: [],
swiper: "",
swiperOptionTop: {
loop: true,
spaceBetween: -200,
slidesPerView: 1.7,
autoplay: true,
centeredSlides: true,
slideToClickedSlide: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
//不同屏幕大小配置不同参数，类似媒体查询
breakpoints: {
1920: {
slidesPerView: 2.5,
spaceBetween: -200
},
},
//分页器配置项
pagination: {
el: ".swiper-pagination", //分页器的类名
clickable: true, // 点击分页器跳切换到相应的幻灯片
type: "bullets",
// type: 'bullets' | 'progressbar' | 'fraction' , //小圆点|进度条|数字页码
dynamicBullets: true, //动态小圆点(type:'bullets'时)
bulletClass: 'my-swiper-pagination-bullet',
bulletActiveClass: 'my-bullet-active',
//自定义分页器，需设置样式
// renderBullet(index, className) {
// return `<span class="${className} swiper-pagination-bullet-custom">${index + 1}</span>`
// },
},
// on:{
// resize: () => {
// setTimeout( () => {
// let swiper = this.$refs.swiperTop.$swiper;
// //更新Swiper，相当于初始化
// swiper.update();
// }, 500)
// }
// }
}
}
},
}
