今回は、スライダーのプラグイン［slick］を使用して、スライダーに動画を入れ、自動再生してくれるように作成します。
まずはどんな感じになるか、画像をクリックしてデモをご覧ください。
最初に［slick］を使用するにはjQuery本体が必要になるので、jQueryの読み込みを行ってください。すでにある場合は記述不要です。
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>次に、［slick］を動かすには以下二点の方法があります。
今回は、簡単な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;
});以上が設定ができたら、動画スライダーの完成です。切り替えはフェードにしています。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
