slick sliderで静止画と動画をスライドさせる方法 copilot
html
<div class="slider">
<div><img src="img1.jpg" /></div>
<div><img src="img2.jpg" /></div>
<div><img src="img3.jpg" /></div>
<div>
<video id="video-slide" width="100%" muted>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</div>
javascript（jQuery + Slick）
$(document).ready(function(){
const $slider = $('.slider');
const $video = $('#video-slide')[0];
$slider.slick({
autoplay: true,
autoplaySpeed: 3000,
pauseOnHover: false,
pauseOnFocus: false,
arrows: true,
dots: true
});
// スライドが変わる直前に動画を停止＆リセット（動画から離れるとき）
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
const isVideoSlide = currentSlide === slick.slideCount - 1;
const isLeavingVideo = nextSlide !== slick.slideCount - 1;
if (isVideoSlide && isLeavingVideo) {
$video.pause();
$video.currentTime = 0;
}
});
// スライドが変わった後に動画スライドなら再生＆自動スライド停止
$slider.on('afterChange', function(event, slick, currentSlide){
const isVideoSlide = currentSlide === slick.slideCount - 1;
if (isVideoSlide) {
$slider.slick('slickPause');
$video.currentTime = 0;
$video.play();
} else {
$video.pause();
$video.currentTime = 0;
}
});
// 動画が終了したらスライダーを再開し、動画を先頭に戻す
$video.addEventListener('ended', function(){
$video.currentTime = 0;
$slider.slick('slickPlay');
});
});
・muted 属性は自動再生を許可するために重要です（ブラウザの仕様）。
・slickPause() / slickPlay() で自動スライドの制御。
・currentTime = 0 で動画を先頭に戻す。
・beforeChange と afterChange の両方で動画の状態を管理。