• 最終更新日：

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

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; //ナビとメインスライダーの紐付け
});

さいごに

Swiperでパララックス スライダーを実装する方法を紹介しました。サイトに奥行きを出したいときに使えるスライダーです。注意点としてはSwiper５系だとIE11でループが機能しなかったので、必ず４系を使うようにしましょう。

Swiper４系のパラメーターについては以下のサイトで詳しく説明されているので参考にしてみてください。

参考
swiper.js使ってみたからそのオプションについて なんかいろいろデザインする人

Swiperを使ったスライダーについては、他の記事にも書いているので興味のある方はどうぞ。

背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法
背景画像をズームアップしながらフェードで切り替えるスライダー - Swiperで実装する方法
背景画像をフェードで切り替えるスライダーswiper.jsの使い方（ページネーションあり）
背景画像をフェードで切り替えるスライダーswiper.jsの使い方（ページネーションあり）
こちらの記事も読まれています

【Swiperスライダー】バラバラの画像サイズを上下中央に揃えて実装する方法

Sassの使い方と導入するメリット - 効率的にサイトを作るためのツール

Rellax.jsの使い方 - テキストも画像もパララックスできるプラグイン

FLOCSSベースのサイト設計 - 破綻しないルールを決める

意外と知らない！？マウススクロールに余韻をもたせるjQueryプラグイン