Slick轮播图包含图片和视频示例

<!DOCTYPE html>
<html>
	<head>
		<title>Slick轮播图包含视频示例</title>
		<link rel="stylesheet" type="text/css"
			href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
		<link rel="stylesheet" type="text/css"
			href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
	</head>
	<body>

		<div class="slider">
			<div>
				<img src="hongtian-clothing/static/imgs/[email protected]" alt="Image 1">
			</div>
			<div>
				<video autoplay muted>
					<source src="hongtian-clothing/static/imgs/myvideo.mp4" type="video/mp4">
					Your browser does not support the video tag.
				</video>
			</div>
			<div>
				<img src="hongtian-clothing/static/imgs/[email protected]" alt="Image 2">
			</div>
		</div>

		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
		<script>
			$(document).ready(function() {
				$('.slider').slick({
					autoplay: true,
					autoplaySpeed: 3000,
				});

				$('.slider').on('afterChange', function(event, slick, currentSlide) {
					var slideType = $(slick.$slides[currentSlide]).find('video').length ? 'video' : 'image';
					if (slideType === 'video') {
						var video = $(slick.$slides[currentSlide]).find('video')[0];
						video.onended = function() {
							$('.slider').slick('slickNext');
						};
					}
				});
			});
		</script>

	</body>
</html>

你可能感兴趣的:(音视频,javascript,前端)