最終更新日：2020/04/27

Swiperでパララックススライダーを実装する方法 - サムネイル付き

今回はSwiper.jsを使ってパララックスするスライダーの実装方法を紹介します。奥行きのあるスライダーを実装したい方にオススメです。

・デモサイト

実装内容は以下。

Swiperの４系を使用（IE対策のため）
imagesLoaded.jsで背景画像の読み込み確認をする
IEとEdgeではガタつきがあるのでフェードに切り替える
jQueryは使わない

説明する環境は以下。

macOS Mojar v10.14.6
Visual Studio Code v1.44.2

Swiperを使ってパララックススライダーの実装する方法

最新のSwiperはバージョン５までリリースされていますがIE未対応なため、４系のものを使用します。また背景画像の読み込みが完了したタイミングでSwiperを実行したいので、imagesLoaded.jsを使用します。

必要なライブラリを読み込む

まずはSwiper本体とimagesLoaded.jsを読み込みましょう。２つともCDNが用意されているので、以下を書き加えるだけで読み込めます。

<!-- swiper専用css-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css"/>
<!-- imagesLoaded.js -->
<script src="//cdn.jsdelivr.net/npm/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<!-- swiper.js -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>

ダウンロードして読み込みたい方は公式サイトからどうぞ。

参考

Swiper Swiper公式サイト

参考

imagesLoaded imagesLoaded公式ページ

HTMLに書くこと

スライダー部分とサムネイルが連動したHTML構造は以下になります。デモサイトでは５枚のスライドを使っていますが、コードが長くなるため、1枚分のコードしか載せていません。デモサイトでは全部のコードを載せているので参考にしてみてください。　

・デモサイト

<div class="main-visual__slider">
  <!-- swiperメイン部分 -->
  <div class="swiper-container swiper-container-main js-slider-main">
    <!-- swiper-wrapper -->
    <div class="swiper-wrapper">
      <!-- swiper-slide001 -->
      <div class="swiper-slide">
        <div
            class="swiper-bgimg"
            style="background-image: url('./images/swiper-img01.jpg');"
            data-swiper-parallax-x="80%"
        ></div>
        <div class="swiper__boby">
          <h3 class="swiper__heading">SLIDER001</h3>
          <p
            class="swiper__txt"
            data-swiper-parallax-x="30%"
            data-swiper-parallax-opacity="0"
          >
            Gorillas are ground-dwelling, predominantly herbivorous apes
            that inhabit the forests of central Sub-Saharan Africa. The
            genus Gorilla is divided into two species: the eastern
            gorillas and the western gorillas (both critically
            endangered), and either four or five subspecies. They are
            the largest living primates.
          </p>
        </div>
      </div><!-- /swiper-slide001 -->

      <!-- 
           swiper-slide002〜005までswiper-slide001の
           繰り返しのため省略 
      -->

    </div><!-- /swiper-wrapper -->

    <!-- swiper-button-next -->
    <div class="swiper-button-next swiper-button-white"></div><!-- /swiper-button-next -->

  </div><!-- /swiperメイン部分終了 -->
          
<!-- swiperサムネイル部分 -->
  <div class="swiper-container swiper-container-nav js-slider-nav">
    <!-- swiper-wrapper -->
    <div class="swiper-wrapper" role="navigation">
      <!-- swiper-slide001 -->
      <div class="swiper-slide">
        <div
            class="swiper-bgimg"
            style="background-image: url('./images/swiper-img01.jpg');"
        ></div>
        <div class="swiper__boby">
          <p class="swiper__heading">SLIDER001</p>
        </div>
      </div><!-- /swiper-slide001 -->

      <!-- 
           swiper-slide002〜005までswiper-slide001の
           繰り返しのため省略 
      -->
          
    </div><!-- /swiper-wrapper -->
  </div><!-- /swiperサムネイル終了 -->

</div><!-- main-visual__slider -->

重要な部分を説明します。

Swiperを動かすために必要なHTML構造とクラス名は決まっているのでそこから外れないようにしましょう。そして以下の２つのクラス名はメイン部分とサムネイル部分のスライドを動かすために必要なので忘れずつけてください。

３行目にあるjs-slider-main … メイン部分を動かすために必要
40行目にあるjs-slider-nav … サムネイル部分を動かすために必要

あとはパララックスさせるために必要なdata属性には以下を使っています。

data-swiper-parallax-x … 水平方向の表示される前の移動位置を指定
data-swiper-parallax-opacity … 表示される前の透明具合を指定

Sassで書くこと

CSSで書くとコードが長くなるのでSassで書いています。コードの書き方やベンダープレフィックスはご自身の環境にあわせてください。

・デモサイト

.swiper-slide {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-bgimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

//メイン部分
.swiper-container-main {
  height: calc(100vh - 216px);
  min-height: 700px;
  transition: opacity 0.6s ease, transform 0.3s ease;
  .swiper__boby {
    position: absolute;
    top: 32%;
    left: 0;
    width: 50%;
    padding-left: 5%;
    color: #fff;

    .swiper__heading {
      font-size: 30px;
      margin-bottom: 30px;
    }
    .swiper__txt {
      font-size: 13px;
      line-height: 1.4;
      transform: translateX(50px);
    }
  }

  &:hover {
    .swiper-button-prev,
    .swiper-button-next {
      transform: translateX(0);
      opacity: 1;
      visibility: visible;
    }
  }
}

//ナビゲーション部分
.swiper-container-nav {
  width: 50%;
  height: 9.5%;
  position: absolute;
  right: 0;
  bottom: 2.5%;
  z-index: 10;
  .swiper-slide {
    cursor: pointer;

    &.swiper-slide-active {
      .swiper__boby {
        &:before {
          background-color: rgba(#000, 0);
        }
      }
    }
    &.swiper-slide-duplicate-active {
      .swiper__boby {
        &:before {
          background-color: rgba(#000, 0);
        }
      }
    }
  }
  .swiper__boby {
    position: relative;
    width: 100%;
    height: 100%;
    &:before {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background-color: rgba(#000, 0.55);
      transition: background-color 0.3s ease;
      content: "";
      z-index: 1;
    }
    &:hover {
      &:before {
        background-color: rgba(#000, 0);
      }
    }

    .swiper__heading {
      position: absolute;
      width: 100%;
      top: 37%;
      left: 9%;
      color: #fff;
      font-size: 15px;
      z-index: 2;
    }
  }
}

//右のページ送り
.swiper-button-next {
  width: 38px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  transform: translateX(-20px);
}

/*
 SP表示用
--------------------------------*/
@media screen and (max-width: 560px) {
  .swiper-container-main {
    height: calc(100vh - 60px);
    min-height: auto;
    .swiper__boby {
      top: 25%;
      width: 90%;
      padding-left: 5%;
      padding-right: 5%;
    }
  }
  .swiper-container-nav {
    width: 100%;
    height: 9.5%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
}

メインスライダー部分の高さをvhで設定していますが、iOS版Safariのことも考えるとJavaScriptで高さを設定したほうが良いでしょう。以下が実装に役立ちます。

参考

スマホで要素を高さいっぱいに表示したいのに、期待通りに表示されない時の解決方法 coliss

Javascriptで書くこと

init.jsなどファイルを作成してパララックスで動かす指定を書いていきます。EdgeとIE11ではスライダーのガタつきが強いので、ユーザーエージェント判定でパララックスではなくフェード表示に切り替えています。

・デモサイト

//背景画像を読み込んでるか確認
imagesLoaded(".swiper-bgimg", { background: true }, function () {
  
    var mainSliderTarget = ".js-slider-main", //メイン部分のスライダー
    navSliderTarget = ".js-slider-nav"; //ナビ部分のスライダー

  var userAgent = window.navigator.userAgent.toLowerCase();

  // Main Slider
  if ( 
    userAgent.indexOf("msie") != -1 ||
    userAgent.indexOf("trident") != -1 ||
    userAgent.indexOf("edge") != -1
  ) { //EdgeとIEのときはfade
    var mainOptions = {
      loop: true, //ループさせる
      speed: 2000, //２秒かけながら移動
      effect: "fade", //フェードの指定
      loopAdditionalSlides: 10, //ループのときに作られるクローンの枚数。５枚表示させるなら倍の数
      navigation: { //ページ送りを動かす指定
        nextEl: ".swiper-button-next",
      },
    };
  } else { //それ以外はパララックスさせる
    var mainOptions = {
      loop: true, 
      speed: 1200, 
      parallax: true, //パパラックスさせる
      loopAdditionalSlides: 10, 
      navigation: {
        nextEl: ".swiper-button-next",
      },
    };
  }

  var mainSlider = new Swiper(mainSliderTarget, mainOptions); //.js-slider-mainとそのオプションをセットする

  // Navigation Slider
  if ( 
    userAgent.indexOf("msie") != -1 ||
    userAgent.indexOf("trident") != -1 ||
    userAgent.indexOf("edge") != -1
  ) {
    var navOptions = {
      loop: true,
      loopAdditionalSlides: 10,
      speed: 2000,
      autoplay: {
        //ナビのほうにautoplayを書くこと
        delay: 3000, //３秒後に次のスライドへ
        disableOnInteraction: false, //ユーザー側で操作してもスライドを止めない
      },
      //spaceBetween: 5, //ナビスライド同士を何px開けるか指定
      slidesPerView: 3, //画面状で見れるスライドの枚数を指定
      centeredSlides: true, //アクティブのスライドを表示にする
      touchRatio: 0.2, //どのくらいスワイプしたら次の画像に移動するか
      slideToClickedSlide: true, //スワイプ中にクリックした時、今の動きをキャンセルしてクリックした側のスライドに移動する
      direction: "horizontal", //スライドする方向について。縦はvertica、横はhorizontal
    };
  } else {
    var navOptions = {
      loop: true,
      loopAdditionalSlides: 10,
      speed: 1200,
      autoplay: {
        delay: 3000, 
        disableOnInteraction: false, 
      },
      //spaceBetween: 5, 
      slidesPerView: 3, 
      centeredSlides: true, 
      touchRatio: 0.2, 
      slideToClickedSlide: true, 
      direction: "horizontal", 
    };
  }
  var navSlider = new Swiper(navSliderTarget, navOptions); //js-slider-navとオプションをセットする

  // メインスライダーとナビを紐づける
  mainSlider.controller.control = navSlider; //メインスライダーとナビの紐付け
  navSlider.controller.control = mainSlider; //ナビとメインスライダーの紐付け
});