Vue3.0中使用swiper完成视频墙滚动
这里使用的是swiper8版本
1.对swiper进行引入
import Swiper, { Autoplay, Navigation } from 'swiper'
Swiper.use([Autoplay, Navigation])
// swiper-bundle.min.css 决定了小圆点和左右翻页标签,如果不需要可以不引用
import 'swiper/css/navigation'
import 'swiper/css'
2.设置相应的template结构
<template>
<div class="swiper-father">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in devices" :key="index">
<video class="video" :src="item" :autoplay="true" muted loop v-if="item.includes('mp4')"></video>
<iframe
class="video"
:src="item"
frameborder="0"
allowfullscreen="true"
scrolling="no"
allow="autoplay"
v-else
></iframe>
<div class="close"></div>
</div>
</div>
</div>
</div>
</template>
3.实例化相应的swiper对象
onUpdated(() => {
new Swiper('.swiper', {
loop: true, // 循环模式选项
autoplay: {
pauseOnMouseEnter: true,
disableOnInteraction: false,
delay: 1000, // 1秒切换一次
},
slidesPerView: 5,
spaceBetween: 68,
navigation: {
nextEl: '.swiper-button-prev',
prevEl: '.swiper-button-next',
},
})
})
在swiper8版本中使用 ‘.swiper’ 代替了 ‘.swiper-container’
4.设置样式
在这里我用的是sass,对css进行了预编译,感兴趣的同学可以去了解一下。
<style lang="scss" scoped>
.swiper-father {
position: absolute;
left: 765px;
bottom: 95px;
width: 1932px;
height: 194px;
pointer-events: all;
/* 如果要对swiper中的切换按钮进行自定义样式,切记要将按钮提出来到容器外面,给父容器设置 pointer-events: all;避免失去点击 */
.swiper-button-prev {
cursor: pointer;
position: absolute;
left: -43px;
top: 104px;
width: 37px;
height: 37px;
color: transparent !important;
background-image: url('@/assets/fixed/left_on.png') !important;
background-size: 100% 100%;
}
.swiper-button-next {
cursor: pointer;
position: absolute;
right: 68px;
top: 104px;
width: 37px;
height: 37px;
color: transparent !important;
background-image: url('@/assets/fixed/right_on.png') !important;
background-size: 100% 100%;
}
.swiper {
position: absolute;
width: 1823px;
height: 194px;
background: transparent;
pointer-events: all;
.swiper-wrapper {
display: flex;
flex-direction: row;
align-items: center;
.swiper-slide {
width: 326px;
height: 194px;
background: rgba(4, 24, 25, 0.4);
border: 1px solid #275960;
.video {
width: 100%;
height: 100%;
}
.close {
position: absolute;
top: 4px;
right: 11px;
width: 30px;
height: 30px;
background-image: url('@/assets/fixed/close.png');
background-size: 100% 100%;
}
}
}
}
}