swiper在vue中的使用
前提:swiper6中无法使用自动轮播,决定使用swiper5,这里使用的是5.3.6,因为之前用5的高版本会出现触摸无法滑动的问题
1.安装: npm i npm install swiper@5.3.6 vue-awesome-swiper@4.1.1 --save
2.使用
局部使用
1)导入样式并注册组件,如果需要其他模组可参考官文文档自行添加
import {
Swiper, SwiperSlide } from 'vue-awesome-swiper' // 导入组件
import "swiper/css/swiper.css"; // 导入样式
2)在template或dom中插入组件
<Swiper ref="mySwiper" :options="swiperOptions">
<SwiperSlide v-for="(item1, index) in staffDetailData.certificateL" :key="index">
<img :src="returnImgUrl(item1)">
</SwiperSlide>
</Swiper>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
3)在data中对options进行配置,详细可根据文档配置
swiperOptions: {
observer: true, //修改swiper自己或子元素时,自动初始化swiper默认为false
observeParents: true, //修改swiper的父元素时,自动初始化swiper
slidesPerGroup: 6, //定义slides的数量多少为一组
slidesPerView: 1, // 每一个slide显示的数量
width: 1000,