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

原创

已于 2022-11-02 15:47:46 修改 · 3.5k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #vue3 #swiper8

于 2022-11-01 00:10:14 首次发布

本文介绍了如何在Vue3中使用Swiper8库实现一个自定义轮播组件，包括左侧视频轮播和右侧标题栏的实现。通过使用Swiper的slideTo方法和组件方法，实现了平滑的切换效果。文章还提供了具体实现的代码示例，以及对比了使用Swiper与手动实现的优缺点，并分享了解决loop模式下视频错位的bug。

偶然发现一个网站页面轮播图样式很好看，就尝试伪实现和使用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="openPictureI