株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • スライダープラグイン[slick]を使用して、スライダーに動画を使用する方法 (自動再生)
2023年3月29日
スライダープラグイン[slick]を使用して、スライダーに動画を使用する方法 (自動再生)

今回は、スライダーのプラグイン[slick]を使用して、スライダーに動画を入れ、自動再生してくれるように作成します。

初めに

まずはどんな感じになるか、画像をクリックしてデモをご覧ください。

slickの設定

最初に[slick]を使用するにはjQuery本体が必要になるので、jQueryの読み込みを行ってください。すでにある場合は記述不要です。

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>

次に、[slick]を動かすには以下二点の方法があります。

①ファイルをダウンロードして読み込む方法
②CDNを使って読み込む

今回は、簡単なCDNを使用して設定していきます。

CSS読み込み
※HTMLの<head>タグの区間にいれてください。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.css">

JavaScript読み込み※HTMLの</body>の上に記述してください。

<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

スライダー設定

[slick]の読み込み設定を終えたらスライダーの設定をしていきます。

HTML

       <div class="top-main-slider">
          <ul class="main-slider">
            <li class="movie"><video src="https://autoproject.nagoya/wp-content/uploads/120739-1.mp4" autoplay loop muted playsinline></video></li>
            <li class="movie"><video src="https://autoproject.nagoya/wp-content/uploads/58142.mp4" autoplay loop muted playsinline></video></li>
          </ul>
        </div>

CSS

/*CSSはデザインによってサイズ等を決めてください*/

.top-main-slider  {
  width: 50%;
  height: 40vh;
  object-fit: cover;
  margin: 50px auto;
}
.main-slider video {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}

JavaScript

$('.main-slider').slick({
  fade:true,//フェード切り替え
  autoplay:true, //自動スライド
  autoplaySpeed:6000, //スライドさせる間隔
  dots:true, //ドットインジケーターを表示
  lazyLoad:"progressive", //画像の遅延読み込み
  arrows:false, //スライドの左右の矢印ボタンを非表示
   cssEase:"cubic-bezier(0.9, 0.03, 0.4, 0.9)" //CSS3アニメーションイージングを設定
});
  var video = $('video').get(0);
  video.muted = true;
});

以上が設定ができたら、動画スライダーの完成です。切り替えはフェードにしています。

Webデザイナー / コーダーのみなさまへ

株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。

サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。

>> バックエンドについて、オートプロジェクトに問い合わせをする