vue3使用Swiper8实现自定义轮播效果

偶然发现一个网站页面轮播图样式很好看，就尝试伪实现和使用swiper实现它

 左侧是视频，使用的是video标签，也是swiper垂直轮播的实例

右侧是标题栏，功能效果等效于swiper的分页器Pagination的小圆点

前言

起初，我在思考它是怎么将小圆点的样式给改写成这样的！然而后来才发现，只不过是使用swiper的slideTo方法罢了。这里不禁要感叹一下，为啥这么多人分享vue3如何使用swiper8，却很少有人分享如何使用swiper中的methods，幸好我找到一篇才能完美实现上述的功能需求！

swiper8中文官网vue实例demo        Swiper Demos

swiper8中文官网api文档        mySwiper.slideTo(index, speed, runCallbacks)_Swiper参数选项

Swiper API

感谢这篇文章的解惑        Vue3 初始化swiper以及如何使用swiper的方法与事件  

具体实现

1.使用swiper实现        swiper.vue

<template>
    <div class="swiper-box">
        <swiper :direction="'vertical'" :pagination="{ clickable: true, }" :modules="modules" :autoplay="{ delay: 10000, disableOnInteraction: false }"
            :loop="true" class="mySwiper l-box" @swiper="setControlledSwiper" @slideChange="onSlideChange" ref="mySwiper">
            <swiper-slide v-for="(i, index) in ctnList" style="width: 800px;height:450px;position: relative;">
                <!-- disablePictureInPicture -->
                <video class="video" x5-video-player-type="h5" x-webkit-airplay="true" webkit-playsinline="true" loop
                    autoplay muted controls data-attr="画中画" :id="'video'+index">
                    <source :src="i" type="video/mp4">
                </video>
                <!-- 画中画按钮 -->
                <el-tooltip content="开启画中画">
                    <el-icon class="icon-picture" @click="openPictureInPicture(index)"><VideoCameraFilled /></el-icon>
                </el-tooltip>