レスポンシブな動画カルーセルをjQueryプラグイン「slick.js」を使って実装

レスポンシブな動画カルーセルの実現

ワードプレスの改修案件が弊社に入り、単品のYouTube動画を掲載していた部分で、複数動画を掲載するうえで動画カルーセルを実現したいという要望があった。
他社が作成したコードに手を入れて、最小限の変更で実現するため、生のhtml、css、JQueryを使って対応することになった。
slick.jsを使った記事が出てきたが、パッと用途にそのまま合うものがなかったので、まとめることにした。

完成イメージ

slick.jsを導入する

既存もcdn経由だったので、手っ取り早く対応するため、同じくcdnからとってくることにした。

JavaScript

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

CSS

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">

click.jsを要素に適用する

今回は、.slideというclassに適用させる。
動画は１枚ずつ表示して、１枚ずつスクロールして表示するようにする。
下部に表示される枚数の分かるドットを表示、次や前に進む左右の矢印ボタンも表示する。
自動スライドはオフとする。

<script type="text/javascript">
  $('.slide').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    dots: true,
    accessibility: true,
    arrows: true,
    swipe: true,
    swipeToSlide: true
  });

  $('.slide').bind('touchstart', function() {
    return true;
  });
</script>

HTMLとCSSを用意する・iframeのYouTube動画埋め込みを使う

今回は、iframeのYouTube埋め込みを使ってカルーセルをつくるパターンの紹介とする。

HTML

<div class="slide-wrapper">
  <div class="slide">
    <div class="slide-item"><iframe width="560" height="315" src="your youtube url" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class="slide-item"><iframe width="560" height="315" src="your youtube url" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    <div class="slide-item"><iframe width="560" height="315" src="your youtube url" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
  </div>
</div>

CSS

/* 動画表示領域（表示サイズ）の設定 */
.slide-wrapper {
  width: 100%;
  max-width: 560px;
  margin: 0 auto
}

/* レスポンシブ対応 */
.slide-item {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.slide-item iframe {
  position: absolute;
  top:   0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* 背景が白の場合に表示できるように黒文字としている */
.slick-next:before {
  content: '→';
  color: black;
}

.slick-prev:before {
  content: '←';
  color: black;
}

まとめ

以上、
生のHTML、CSSを使い、Jqueryプラグインの「slick.js」を用いて、レスポンシブ対応の１枚ずつ表示する動画カルーセルを作成する流れでした。
動画を用いたカルーセル／スライダーが必要になり、スパッと実装したい時の参考になれば幸いです。