スライダープラグイン「Swiper」で前後の画像を表示する

カテゴリー: Web制作

タグ: JavaScript; Swiper

制作担当

2017.05.10

2017/8/21 Swiperの新しい記事をアップロードしました！

実用的な6つのサンプルを用意して、Swiperの各種オプションについてさらに詳しく解説しています。ぜひご参考にしていただければ幸いです。

Swiperを使用した基本的なスライダー実装から応用まで！実用的な6つのサンプル

数あるJavaScriptのスライダーの中でも個人的によく使用しているスライダーが『Swiper』です。jQueryなしで動作し、動作が軽量。また膨大なオプションが用意されており、非常にカスタマイズ性に優れています。そして”画像”スライダーではなく”コンテンツ”スライダーですので、テキストや画像・動画まで表示させることができます。

そんなSwiperですが、スライダー画像の前と後ろの画像を隠さず表示させる際のカスタマイズに結構な時間つまずいてしまったので、メモがてらこちらにも実装方法を投稿することにしました。

やりたかったスライダーのサンプル

まずはじめに作成するスライダーのサンプルをご覧ください。もちろんモバイル対応です。

Swiper demo - 画像を左右にはみ出して表示

Swiperの実装

Swiperの公式サイトから、ファイル一式をダウンロードします。公式サイトにアクセスし、メインビジュアルにある『Download』をクリックするとすぐにダウンロードが始まります。
Swiper-X.X.X.zip (Xはバージョン) がダウンロードされますので、ファイルを展開します。以下のディレクトリ構成となっていると思います。
様々なファイルが入っていますが、必要なファイルは『/dist/css/swiper.min.css』と『/dist/js/swiper.min.js』だけです。二つのファイルをスライダーを実装したいHTMLファイルへ適切に読み込みできるようにします。例として、サンプルの指定は以下のようにしています。
```
<link rel="stylesheet" href="./css/swiper.min.css">
<script src="./js/swiper.min.js"></script>
```
表示したい画像を配置します。例としてサンプルでは、HTMLファイル直下にimgディレクトリを作成して、画像を保存しております。

先ほどCSSとJavaScriptを読み込んだHTMLへ、スライダーを表示する記述を追加します。今回は以下のようにします。

<div class="mainvisual">
  <div class="mainvisual-inner container">
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide"><img src="./img/img01.jpg"></div>

        <div class="swiper-slide"><img src="./img/img02.jpg"></div>

        <div class="swiper-slide"><img src="./img/img03.jpg"></div>

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

      <div class="swiper-pagination"></div>

      <div class="swiper-button-prev">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
          <path class="arrow arrow-left" d="M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z" />
        </svg>
      </div><!-- .swiper-button-prev -->

      <div class="swiper-button-next">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 44">
          <path class="arrow arrow-right" d="M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z" />
        </svg>
      </div><!-- .swiper-button-next -->
    </div><!-- .swiper-container -->
  </div><!-- .mainvisual-inner -->
</div><!-- .mainvisual -->

少しだけスタイリングします。

/**
 * 最大幅の指定と中央寄せ
 */
.container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
}

/**
 * swiper.js
 */
.swiper-container {
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}

.swiper-button-prev,
.swiper-button-next {
  fill: #fff;
  stroke: none;
  stroke-width: 0;
  z-index: 10000;
  width: 20px;
  margin-top: -18px;
  background-image: none;
}

.swiper-pagination-bullet-active {
  background: #fff;
}

@media (min-width: 768px) {
  .swiper-button-prev,
  .swiper-button-next {
    width: 27px;
    margin-top: -22px;
  }
}

/**
 * mainvisual
 */
.mainvisual {
  overflow-x: hidden;
}

最後にswiperの初期化処理をオプションも加えて記述します。公式の実装方法ではスライダーを表示するHTML記述より下に記述しなければなりませんが、今回はheadタグ内に読み込めるようにページ読み込み後の処理を加えて記述します。
```
<script>
/**
 * swiper.js の初期化処理
 */
window.addEventListener('load', function() {
  var swiper = new Swiper('.swiper-container', {
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 2,
    speed: 200,
    // autoplay: 2000
  });
}, false);
</script>
```

引数の解説

pagination

スライド中央下部にある丸いページネーションを表示します。

paginationClickable

ページネーションを実際にクリックして動作するようにするか否か。trueでオンにしています。

nextButton, prevButton

左右のスライドを表示するためのボタンを指定します。今回左右のページネーションの矢印はSVGで実装しているため、このオプションで指定しないとクリックが反応してくれません。

loop

スライダーをループするか否か。今回はtrueにしています。

slidesPerView

1画面で見えるスライド数を指定します。autoにして常にスライドが見えるようにしています。

spaceBetween

スライド間の隙間を指定します。今回2pxを指定しています。

これで設定は終了です。

このカスタマイズの肝はオプションで指定した『slidesPerView: 'auto'』です。これは一画面で見えるスライド数を指定するオプションです。デフォルトでは1となっており、autoにしないとスライドが一周した後、前後にチラッと表示している画像が見えなくなってしまいますので、このカスタマイズをする際には必ず『auto』に指定してください。

※著者はこのオプションを見つけるのに2時間も掛かってしまいました…

先ほどのサンプルのように動作しているかご確認ください。

まとめ

Swiperは非常に質の高いスライダーですが、多機能すぎて、いざ複雑なカスタマイズを行おうとすると、対応するオプションを探すのが大変です。全てを把握することは全然できていませんが、また面白いカスタマイズを思いついたら記事にしようと思います。