swiper 视频无限自动轮播无缝轮播的实现

最新推荐文章于 2025-06-17 22:41:20 发布

原创

最新推荐文章于 2025-06-17 22:41:20 发布 · 1.2w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#视频轮播 #视频自动轮播 #视频无缝轮播 #swiper视频轮播

本文介绍如何利用Swiper库的4.2.2版本，配置视频轮播，实现视频的无限自动无缝播放功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本案例用的swiper-4.2.2.min.js 和 swiper-4.2.2.min.css

<div class="swiper-container" id="swiper2">
					<div class="swiper-wrapper">
						<#list videoList as video>
						    <div class="swiper-slide">
							<video id="video1" src="${video.video_url}" title="${video.video_title}" style="width: 680px; height: 340px; background: #e1e1e1; cursor: pointer;"> 您的浏览器不支持 video 标签。
							</video>
						    </div>
						</#list>

					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>

	var mySwiper2 = new Swiper('#swiper2', {
			loop : true,
			speed : 2000,
			autoplay : {
				delay : 5000,
				stopOnLastSlide : false,
				disableOnInteraction : true,
			},
			pagination : '.swiper-pagination'
		})

		mySwiper2.el.onmouseover = function() { //鼠标进入
			mySwi