<!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>
Slick轮播图包含图片和视频示例
于 2023-11-23 17:48:39 首次发布