こんにちは、ryohei(@ityryohei)です!

本記事では、Swiperでスライドを切り替えた際に動画を自動で再生・一時停止するスライダーの作り方をご紹介しています。

実現したいこと

本記事で実現したい内容はとてもシンプルです。下記の3つの要件をクリアするスライダーを作っていきます。

  • 前へ・次へでスライドを切り替える
  • 切り替えた先のスライドに動画が埋め込まれていた場合、再生する
  • スライドを切り替えた際に動作を一時停止する

前提として「autoplay」と「loop」は使用しないため、その点ご了承いただければと思います。

では、解説していきます。

Swiper本体を読み込む

まずは「Swiper」本体をダウンロードします。公式サイトからダウンロードする、もしくは開発者の方から提供されている下記のCNDを読み込んでご使用いただければと思います。

<!-- Swiper CSS -->
<link rel="stylesheet"href="https://unpkg.com/swiper/css/swiper.min.css">
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

以上で準備は完了です。早速スライダーを作成していきましょう!

動画を持つスライダーを作成する

まずはHTMLでスライダーの基礎を作成します。

今回、動画の再生・一時停止を確認するために動画を持つスライダーを作成します。動画素材をダウンロードしていただき、スライダーに設置しましょう。

下記は「video」タグに「src」だけを指定した簡単なサンプルになります。動画の容量が大きい場合は「preload」属性の値を「none」にしておくと良いかもしれませんね。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video src="video01.mp4"></video>
        </div>
        <div class="swiper-slide">
          <video src="video02.mp4"></video>
        </div>
        <div class="swiper-slide">
          <video src="video03.mp4"></video>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

続いて上記のスライダーに簡単なスタイルを定義します。

スライダーのスタイルを定義する

スタイルを定義する、といっても基本的なSwiperの本体に記述してあります。そのため、必要な箇所だけ上書きする形でスタイルを作成します。

SCSS

.swiper-container {
    width: 100%;
    height: 100vh;
    
    .swiper-wrapper {
      
        .swiper-slide {
        
            video {
                width : 100%;
                height: 100%;
            }
        }
    }
}

上記ではスライドをビューポートの高さいっぱいに表示するスタイルにしています。

以上でスタイルの作成は完了となります。最後にスクリプトを作成してスライダーに動きを付けます。

スライド切り替え時に動画を自動で再生・一時停止するスクリプトを作成する

スクリプトが思ったよりも長くなってしまったので、処理内容はコメントの方に記載させていただきました。

JS

var mySwiper = new Swiper ('.swiper-container', {

  direction: 'horizontal',
  loop: false,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  
  on: {
    //スライダー遷移時(ドキュメント内の全動画を一時停止にする)
    transitionStart: function(){
      
      var videos = document.querySelectorAll('video');

      Array.prototype.forEach.call(videos, function(video){
        video.pause();
      });
    },
    //スライダー遷移完了後(アクティブスライドの動画を再生する)
    transitionEnd: function(){
      
      var activeIndex = this.activeIndex;
      var activeSlide = document.getElementsByClassName('swiper-slide')[activeIndex];
      var activeSlideVideo = activeSlide.getElementsByTagName('video')[0];
      activeSlideVideo.play();
    
    },
  }
})

ここまでご紹介してきた内容をファイルに反映すると下記のデモのようなスライダーが完成します。スライドを切り替えた際に動画が自動で再生・一時停止をしていると思います。

DEMO

最後に

いかがでしたでしょうか。

Swiper」は公式のドキュメントが充実しており、ドキュメントに目を通すだけでも必要な機能が実現できるようになります。

本記事を作成するにあたって、下記のドキュメントを参考にさせていただきました。

Swiper API | Events
MDN | Video

インターネットでキーワードを入力するだけでほしい情報が手に入る……本当に良い時代ですね。私も皆様に質の良い情報が提供できるようにこれからも自己研鑽を怠らないようにしなければ!

以上、Swiperでスライド切り替え時に動画を自動で再生・一時停止するスライダーの作り方のご紹介でした!