swiper在vue中的使用

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,