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

小跳不会Coding

已于 2023-11-29 16:16:57 修改

阅读量216

点赞数

文章标签：音视频 javascript 前端

于 2023-11-23 17:48:39 首次发布

本文链接：https://blog.csdn.net/weixin_48596030/article/details/134583077

版权

<!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/banner@2x.png" 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/banner_con@2x.png" 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(){
		      var slider = $('.slider').slick({
		        autoplay: true,
		        slidesToShow: 1,
		        slidesToScroll: 1,
		        adaptiveHeight: true,
		        responsive: [
		          {
		            breakpoint: 768,
		            settings: {
		              arrows: false
		            }
		          }
		        ]
		      });
		
		      $('.slider').on('afterChange', function(event, slick, currentSlide){
		        var currentSlideType = $(slick.$slides[currentSlide]).find('video').length ? 'video' : 'image';
		        if(currentSlideType === 'video'){
		          var video = $(slick.$slides[currentSlide]).find('video')[0];
		          video.onended = function(){
		            setTimeout(function(){
		              slider.slick('slickNext');
		            }, 3000); // 3秒后切换到下一个轮播项
		          };
		        } else {
		          setTimeout(function(){
		            slider.slick('slickNext');
		          }, 3000); // 3秒后切换到下一个轮播项
		        }
		      });
		    });
		  </script>

	</body>
</html>