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里面需要添加

如下图：

代码2

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

代码3

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

代码4

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

代码5

网页题目：swiper视频+图片切换与swiper+animate
当前链接：https://www.cdcxhl.com/news/239837.html

成都网站建设公司_创新互联，为您提供域名注册、定制网站、App设计、小程序开发、手机网站建设、面包屑导航

广告

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

猜你还喜欢下面的内容

成都seo排名网站优化

网站建设知识

行业建站