Vue3.0中使用swiper完成视频墙滚动

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%;
                }
            }
        }
    }
}