!!!!!!一定要注意版本，不同版本写法不兼容（这个问题在我刚开始安装使用时坑死我了）
直接 npm i swiper 下载的是版本6，不建议，据听说是vue3使用的，反正我没使用成功。
版本5，我没使用不清楚
更多的是使用版本4 （我使用的是 "swiper": "^4.5.1",）
也可以用版本3，就是版本3中没有 事件 （比如点击或者回调）
还有个vue中使用的 "vue-awesome-swiper": "^3.1.3",
使用过程中遇到和swiper有关的报错，解决不了的，删掉node_modules文件，删掉package-lock.json文件，重新下依赖。
先说版本4：
文档：https://www.swiper.com.cn/api/grid/24.html
<template>
<div class="false-open-line-container">
<!-- 轮播图 -->
<div class="swiper-container" ref="videoSwiper">
<div class="swiper-wrapper" id="swiper">
<div class="swiper-slide" v-for="(item, index) in img" :key="index">
<div width="310" height="200">
swiper+{{index}}
</div>
</div>
</div>
<!-- 左右按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper'
export default {
name: "stationCenterImg",
data() {
return {
img: [
{
videoDevName: "办公室测试机器1",
videoShowUrl: require("@/assets/video/video01.mp4"),
videoCover:require("@/assets/videoCover/video01.png")
},
{
videoDevName: "办公室测试机器2",
videoShowUrl: require("@/assets/video/video02.mp4"),
videoCover:require("@/assets/videoCover/video02.png")
},
{
videoDevName: "办公室测试机器3",
videoShowUrl: require("@/assets/video/video03.mp4"),
videoCover:require("@/assets/videoCover/video03.png")
},
{
videoDevName: "办公室测试机器4",
videoShowUrl: require("@/assets/video/video04.mp4"),
videoCover:require("@/assets/videoCover/video01.png")
},
{
videoDevName: "办公室测试机器5",
videoShowUrl: require("@/assets/video/video05.mp4"),
videoCover:require("@/assets/videoCover/video05.png")
},
{
videoDevName: "办公室测试机器6",
videoShowUrl: require("@/assets/video/video06.mp4"),
videoCover:require("@/assets/videoCover/video06.png")
},
],
};
},
components: {Swiper},
mounted(){
this.initVideo()
},
computed: {
videoSwiper() {
// videoSwiper 是要绑定到标签中的ref属性
return this.$refs.videoSwiper.swiper
},
},
methods: {
// 初始化摄像头视频
initVideo() {
const _self = this
try {
// 初始化swiper
const _self = this
new Swiper('.swiper-container', {
autoplay:true, // 自动轮播
loop:true, // 环路
slidesPerView:3, // 显示3个
on:{
// 回调
init:function(swiper){
_self.addEventClickToVideo()
}
},
// 左右按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
} catch (error) {
}
},
// 进入视频轮播图 停止轮播
onEnter() {
this.videoSwiper.autoplay.stop()
},
// 离开视频轮播图 继续轮播
onLeave() {
this.videoSwiper.autoplay.start()
},
</script>
然后是 "vue-awesome-swiper": "^3.1.3",
<template>
<div class="false-open-line-container">
<!-- 轮播图 -->
<swiper class="swiper" :options="swiperOption" style="margin-top:20px" ref="videoSwiper">
<swiper-slide v-for="(item, index) in videos" :key="index">
<div width="310" height="200">
swiper+{{index}}
</div>
</swiper-slide>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
</swiper>
</div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
name: "stationCenterImg",
data() {
return {
// 轮播参数
swiperOption: {
slidesPerView: 3,
spaceBetween: 12,
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false //用户操作之后是否停止自动轮播
},// 可选选项，自动滑动
loop:true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
videos: [
{
videoDevName: "办公室测试机器1",
videoShowUrl: require("@/assets/video/video01.mp4"),
videoCover:require("@/assets/videoCover/video01.png")
},
{
videoDevName: "办公室测试机器2",
videoShowUrl: require("@/assets/video/video02.mp4"),
videoCover:require("@/assets/videoCover/video02.png")
},
{
videoDevName: "办公室测试机器3",
videoShowUrl: require("@/assets/video/video03.mp4"),
videoCover:require("@/assets/videoCover/video03.png")
},
{
videoDevName: "办公室测试机器4",
videoShowUrl: require("@/assets/video/video04.mp4"),
videoCover:require("@/assets/videoCover/video01.png")
},
{
videoDevName: "办公室测试机器5",
videoShowUrl: require("@/assets/video/video05.mp4"),
videoCover:require("@/assets/videoCover/video05.png")
},
{
videoDevName: "办公室测试机器6",
videoShowUrl: require("@/assets/video/video06.mp4"),
videoCover:require("@/assets/videoCover/video06.png")
},
],
};
},
components: { eventData, chartTitle, swiper,swiperSlide},
watch: {},
mounted(){},
computed: {
videoSwiper() {
// videoSwiper 是要绑定到标签中的ref属性
return this.$refs.videoSwiper.swiper
},
},
methods: {// 进入视频轮播图 停止轮播
onEnter() {
this.videoSwiper.autoplay.stop()
},
// 离开视频轮播图 继续轮播
onLeave() {
this.videoSwiper.autoplay.start()
}
},
};
</script>