【jQuery】slick スライド切替時に動画の再生を開始する

2022/04/14 2022/10/03

動画のスライドショー、ループしていると再生時間と表示時間が噛み合わなくなってくるので、スライドの初めと動画の始めを合わせるやり方。

<ul class="slider">
    <li class="slider-item slider-item01">
        <video src="images/top/mainvisual.mov" autoplay muted loop>
            <img src="images/top/mainvisual_nosup.png">
        </video>
    </li>
    <li class="slider-item slider-item02">
        <video src="images/top/mainvisual.mov" autoplay muted loop>
            <img src="images/top/mainvisual_nosup.png">
        </video>
    </li>
    <li class="slider-item slider-item03">
        <video src="images/top/mainvisual.mov" autoplay muted loop>
            <img src="images/top/mainvisual_nosup.png">
        </video>
    </li>
</ul>

//slick
//適当に読み込み
$('.slider').slick({
    fade: true,
    autoplay: true,
    autoplaySpeed: 3500,
    speed: 800,
    arrows: false,
    dots: false,
    lazyLoad: "progressive",
});
//次の動画に切り替わる（現在のスライドが終わる）タイミングで次の動画の再生ポイントを0に指定
$('.slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    var video = $(".slick-slide").eq(nextSlide).children("video").get(0);
    video.currentTime = 0;
});

slickのbeforeChangeを利用しています。パラメーターの使い方がよくわかっていなくてめちゃめちゃ手こずりました。

参考

Slick.jsを使ってカルーセルスライダーの中央の画像を大きくする【レスポンシブWebデザインでもOK】 - AGN Web!
http://agn.jp/blog/?p=2355

【jQuery】slick スライド切替時に動画の再生を開始する

参考

関連記事