!!!!!!一定要注意版本，不同版本寫法不兼容（這個問題在我剛開始安裝使用時坑死我了）
直接 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>