bxSlider.jsを使って動画と静止画をスライドさせる方法

こんにちは、プロクラスの渡辺です！
普段、サイト制作をしている時にスライドを設置する場合「slick」を使用しているのですが、やりたいことがあって…
今回はbxSlider.jsを使って動画と静止画をスライドさせる方法を備忘録として残したいと思います。

bxSlider.jsって？

レスポンシブデザインに対応しており必要最低限の機能を少ないコードで提供してくれているため、非常にカスタマイズがしやすい！
古くからあるjQueryプラグインですね。

やりたいこと

今回、mp4の動画を1枚目・静止画を2枚目に設置したスライドショーを設置したい。せっかく動画を載せるなら、最後まで流してから2枚目にスライドさせたい。

１：1枚目（動画：だいたい1分半）→2枚目（静止画）のループをするスライド
２：動画は全て流し切ってから2枚目へ
３：動画が流れている時、動画をクリックするとポップアップして、youtubeの埋め込み
４：ユーザーが自分で操作できるようにthumbnailも用意する

上記4点をクリアしたいと考えていました！

調べたこと

普段slickを使っているため、１・３・４は実装できると思いslickで２の実装ができないかを調べたり、ChatGPTを活用して模索していました。
できないことはなさそうでしたが、全てドンピシャとはいかず…また、本来あまりjQueryの記述も得意ではないため別の方法を探してみることに… 😥

調べていると、bxSliderで近いことをされている参考ブログを見つけたため、今回はbxSliderでスライドを実装することに！

HTML

<section class="main bg-fixd">
<ul class="main_slider">
<li class="video-box">
<a href="javascript:void(0);" data-video-id="*********" class="js-modal-video">
<img src="./img/slider/bg-movie.png" alt="">
</a>
<video id="video" src="./img/slider/movie02.mp4#t=0.001" muted playsinline></video>
</li>
<li class="img-box">
<img src="./img/slider/slide01.jpg?01" alt="" class="pc">
<img src="./img/slider/slide01_sp.jpg?01" alt="" class="sp">
</li>
</ul>
<ul class="main_thumbnail">
<li><a data-slide-index="0" href=""><img src="./img/slider/movie02.jpg" alt=""></a></li>
<li><a data-slide-index="1" href=""><img src="./img/slider/slide01.jpg?01" alt=""></a></li>
</ul>
</section>

htmlはとってもよくある感じです。
video-boxにある、aタグはポップアップ用の記述になります。
よくあるmovieボタンを表示させています。

メインビジュアルなので、横も画面いっぱいにしています！

CSS

.main .bx-wrapper {
background-color: transparent;
margin: 0px auto;
border: none;
box-shadow: none;
}
.main .bx-wrapper li {
height: 94lvh;
}
.main .bx-wrapper img,
.main .bx-wrapper video {
display: block;
width: 100%;
}
.main .bx-wrapper video,
.main .bx-wrapper .video-box img {
object-fit: cover;
height: 94lvh;
}
.video-box {
position: relative;
}
.video-box a {
position: absolute;
display: block;
width: 100%;
z-index: 1;
}
.video-box::after {
content: "";
background: rgb(0 0 0 / 40%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main .bx-wrapper video {
filter: grayscale(50%) blur(0.5px);
}
.main_thumbnail {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
margin-top: -7.5%;
padding-left: 2%;
}
.main_thumbnail > li {
width: calc(100% / 10);
}
.main_thumbnail > li > a {
display: block;
position: relative;
padding-top: 75%;
}
.main_thumbnail > li > a > img {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
max-width: 100%;
max-height: 100%;
border: 1px solid #000;
}
.main_thumbnail > li > a.active img {
border: 1px solid #fff;
}
.main .bx-wrapper .img-box .pc {
display: block !important;
}
.main .bx-wrapper .img-box .sp {
display: none !important;
}
@media (max-width: 769px) {
.main .bx-wrapper li {
height: 80vh;
}
.main .bx-wrapper video,
.main .bx-wrapper .video-box img {
height: 80vh;
}
.main_thumbnail {
margin-top: -18.5%;
}
.main_thumbnail > li {
width: calc(100% / 4);
}
.main .bx-wrapper .img-box .pc {
display: none !important;
}
.main .bx-wrapper .img-box .sp {
display: block !important;
}
}

cssも基本的な感じですが、今回動画の雰囲気を少し変えたくてfilterをかけています。

jQuey

//slide
var $video = $('#video').get(0);

$slider = $('.main_slider').bxSlider({
infiniteLoop: true,
mode: 'fade',
speed: 800,
pager: true,
controls: false,
touchEnabled: false,
pagerCustom: '.main_thumbnail',
onSliderLoad : function() {
$video.play();
$video.muted = true;
},
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if ( newIndex == 0 ){
$video.play();
$video.muted = true;
} else {
$video.pause();
$video.currentTime = 0;
$slider.startAuto();
}
}
});

オプションはslickに近いかな〜と思うのでslickを普段から使っている方でも扱いやすいと思います 😉
途中から、videoの終わりを判定して次に進む…みたいなことをしています！