最終更新日：2021.06.11

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="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/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="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js">

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

HTMLに書くこと

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

・デモサイト

<div class="d-demo">
        <div class="d-demo__heading">
          <h1 class="d-demo__ttl">
            <img src="./images/main-ttl.svg" alt="" />
          </h1>
        </div>
        <div class="d-demo__slider">
          <div class="swiper-container swiper-container-main js-slider">
            <div class="swiper-wrapper">
              <div class="swiper-slide d-demo__slide">
                <div
                  class="d-demo__slide-bg js-loading-check"
                  style="background-image: url('./images/test01.jpg');"
                  data-swiper-parallax-x="90%"
                ></div>
                <div class="d-demo__slide-heading">
                  <h3 class="d-demo__slide-ttl">SLIDER001</h3>
                  <p
                    class="d-demo__slide-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>
              <!-- 2枚目以降は省略 -->
            </div>
            <!-- If you need navigation buttons -->
            <!-- <div class="swiper-button-prev swiper-button-white"></div> -->
            <div class="swiper-button-next swiper-button-white"></div>
          </div>
          <!-- /本体swiper -->
          <!-- サムネイルswiper -->
          <div class="swiper-container swiper-container-nav js-slider-nav">
            <div class="swiper-wrapper" role="navigation">
              <div class="swiper-slide d-demo__nav">
                <div
                  class="d-demo__nav-bg js-loading-check"
                  style="background-image: url('./images/test01.jpg');"
                ></div>
                <div class="d-demo__nav-heading">
                  <p class="d-demo__nav-ttl">SLIDER001</p>
                </div>
              </div>
              <!-- 2枚目以降は省略 -->
            </div>
          </div>
          <!-- /サムネイルswiper -->
        </div>
      </div>

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

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

８行目にあるjs-slider … メイン部分を動かすためのクラス名
４０行目にあるjs-slider-nav … サムネイル部分を動かすためのクラス名

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

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

CSSで書くこと

すべてのcssを載せておきます。

・デモサイト

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');
.d-demo {
  width: 100%;
  display: flex;
flex-wrap: wrap; 
position: relative;
padding-bottom: 60px;
}
.d-demo__heading{
width: 20%;
  position: relative;
}
.d-demo__ttl{
width: 20%;
  max-width: 55px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.d-demo__slider{
  width: 80%;
}

.swiper-wrapper {
  will-change: transform;
  -webkit-backface-visibility: hidden;
}

.d-demo__slide {
width: 100%;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.d-demo__slide-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.swiper-container-main {
  height: calc(100vh - 216px);
  transition: opacity 0.6s ease, transform 0.3s ease;
}

.d-demo__slide-heading{
position: absolute;
  top: 32%;
  left: 0;
  width: 50%;
  padding-left: 5%;
  color: #fff;
}

.d-demo__slide-ttl{
font-size: 30px;
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  margin-bottom: 30px;
}

.d-demo__slide-txt{
font-size: 13px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  transform: translateX(50px);
}

.swiper-container-nav {
  width: 50%;
  height: 13%;
  position: absolute;
  right: 0;
  bottom: 3.5%;
  z-index: 10;
}

.d-demo__nav {
  position: relative;
  width: 100%;
  height: 100%;
}
.d-demo__nav-bg{
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
.d-demo__nav:before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.55);
  transition: background-color 0.3s ease;
  content: "";
  z-index: 1;
}
.swiper-slide-active.d-demo__nav:before {
background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav:hover:before {
  background-color: rgba(0, 0, 0, 0);
}
.d-demo__nav-ttl{
font-family: "Poppins", sans-serif;
  font-weight: 400;
  position: absolute;
  width: 100%;
  top: 37%;
  left: 9%;
  color: #fff;
  font-size: 15px;
  z-index: 2;
}

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

参考

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

coliss

Javascriptで書くこと

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

・デモサイト

imagesLoaded(".js-loading-check", { background: true }, function () {
  //背景画像を読み込んでるか確認

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

  if (
    userAgent.indexOf("msie") != -1 ||
    userAgent.indexOf("trident") != -1 ||
    userAgent.indexOf("edge") != -1
  ) {
    var mainOptions = {
      loop: true, //ループさせる
      speed: 2000, //２秒かけながら移動
      effect: "fade", //パパラックスさせる

      loopAdditionalSlides: 10, //ループのときに作られるクローンの枚数。
      navigation: {
        nextEl: ".swiper-button-next",
        //prevEl: ".swiper-button-prev", //戻るボタンが必要ならつける
      },
    };
  } else {
    var mainOptions = {
      loop: true, //ループさせる
      speed: 1200, //１.２秒かけながら移動
      parallax: true, //パパラックスさせる
      allowTouchMove: false, //pcではスライプの禁止、クリックでの移動を禁止する
      loopAdditionalSlides: 10, //ループのときに作られるクローンの枚数。
      navigation: {
        nextEl: ".swiper-button-next",
        //prevEl: ".swiper-button-prev", //戻るボタンが必要ならつける
      },
    };
  }

  var mainSliderTarget = ".js-slider", //メイン部分のスライダー
    navSliderTarget = ".js-slider-nav"; //ナビ部分のスライダー

  // Main Slider

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

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