swiper视频+图片切换与swiper+animate

2023-02-26    分类： 网站建设

之前遇到在项目中需要做一个视频播放+图片的自动切换轮播，需要视频播放完成之后再切换下一张图片。我是用swiper的，先按照自动轮播图片那样做，设置好swiper的一些属性，例如:分页器（pagination: '.swiper-pagination'），分页器是否换图,需要换图(paginationClickable :true)，前进后退按钮的设置，运动速度的快慢（speed），是否要无限循环，是的话设置（loop:true），需要自动播放的的话设置（autoplay: 1000），操作了swiper-slide之后是否需要停止切换，默认是（autoplayDisableOnInteraction:true），不需要的话（autoplayDisableOnInteraction: false），
Swiper-slide高度需要随内容的多少改变（autoHeight: true）等。

代码1

在开始做之前就需要先引入css和js，如图：

效果1

需要做的轮播效果如下图:
在html里面需要添加
<div class="banner-video">
<video class="banner-background" style="width: 100%; object-fit: fill; " poster="" muted="" onended="myfun()" autoplay>
<sourcesrc="https://shipinpaishe.oss-cn-beijing.aliyuncs.com/AWEI.mp4" type="video/mp4">
</video>
</div>
如下图：

代码2

Css需要根据自己需要的效果自己写，然后js如下图：

代码3

另外平时要是需要Swiper加上一些动画的话，首先需要引入css，如下图：

代码4

然后在HTML里面找到需要运动的元素加上样式名为ani ，swiper-animate-effect（切换的效果）、swiper-animate-duration（持续的时间）、swiper-animate-delay（延迟的时间）也要设置好。如下图：

代码5

网站题目：swiper视频+图片切换与swiper+animate
URL地址：https://www.cdcxhl.com/news37/239837.html

成都网站建设公司_创新互联，为您提供标签优化、建站公司、微信公众号、手机网站建设、网站策划、网站设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站制作

网站建设知识

行业网站建设