kdcsライブラリー

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 の両方で動画の状態を管理。