vue3 - swiper插件 实现PC端的 视频滑动功能（仿抖音短视频）

 swiper官网

​​​​​​swiper属性/组件查询

---

vue中使用swiper

• 步骤：

① npm install swiper 安装

② 基础模板：

    
            
            
                

                
...
                
...
            
    

  如图：

• ---

  属性：

direction = " 'vertical' " ，滑动方向，vertical 垂直方向。（注：一定要两对引号包裹着，否则不生效，还要给swiper设置实高）

modules = "modules"

grabCursor="true"，鼠标手掌形状，拖动时变抓手形状

slidesPerView = "1"，slider容器能够同时显示的slides数量(carousel模式)

mousewheel = "true"，鼠标滚轮控制Swiper切换

setWrapperSize="true"，swiper使用flexbox布局，这个会在wrapper上   添加等于slides相加的宽和高

observeParents = "true"，当Swiper 的祖先元素发生变化时，例如show/hide、第一级子元素增加/删除等，则更新Swiper 并触发 observerUpdate 事件

resistanceRatio: 0，抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。

navigation="true"，导航栏

autoplay = "true"，自动播放

loop = "true"，无限循环播放

space-between，每张轮播图之间的距离，该属性不可以和margin属性同时使用。

pagination = "{ clickable: true }"，分页器（是否点击圆点切换轮播）

注：在标签上格式为    :属性=”值“，如 :direction="vertical"

        在 js 中格式为  属性:值 ，如 direction:verical

---

•   完整代码：

• 比较完整的swiper教程：

vue3中使用swiper7轮播图插件_swiper7实例_爱唱歌的前端的博客-CSDN博客

vue3中使用swiper完整版教程_swiper vue3-CSDN博客

如何在vue3中使用swiper插件(教程)_vue3 安装swiper-CSDN博客

---

滑动功能 实现参考文章：

vue实战 实现视频类webapp：(十二) 视频评论列表 － 小专栏vue项目中使用swiper(版本3.1.3)实现视频轮播_vue 视频轮播-CSDN博客

基于vue封装移动触摸滑动组件——简易的swiper_vue 滑动-CSDN博客

vue+swiper仿抖音视频滑动_swiper + video 短视频-CSDN博客 （多个播放按钮）