Swiperを使ってスライダーをつくる #JavaScript

はじめに

スライダーを作りたい！ということで、今回Swiperを使って実装しました。
基本の書き方と応用したものを、備忘録としてまとめています。

Swiperとは？

jQueryを使わず、スライダーが作れるJavaScriptのライブラリです。
ただし、バージョン5以降はIE対象外のため、IE対応させるにはバージョン4を使う必要があります。

Swiperを使うには

GitHubからファイルをダウンロード、もしくはCDNを読み込む

今回こちらのサイトからCDNで読み込んで使用しました。

基本の記述

HTML

<!-- スライダー大枠 -->
<div class="swiper-container">
  <!-- スライドしたい内容を覆う枠 -->
  <div class="swiper-wrapper">
    <!-- スライド -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- ページネーション（※使いたい場合） -->
  <div class="swiper-pagination"></div>

  <!-- ナビゲーション（※使いたい場合） -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- スクロールバー（※使いたい場合） -->
  <div class="swiper-scrollbar"></div>
</div>

CSS

サイズや見た目など設定する際は適宜追加します。

.swiper-container {
    max-width: 1000px;
    margin: 0 auto;
}
.swiper-slide {
    text-align: center;
}

JSでSwiperを初期化

変数swiperを初期化。
この時点でスライダーとしての形はできてる状態。

中身に使用するオプションを追加していく。（必要なオプション機能を適宜）

const swiper = new Swiper('.swiper-container', {
  //↓追加していく

  // パラメーター
  direction: 'vertical',
  loop: true,

  // ページネーション
  pagination: {
    el: '.swiper-pagination',
  },

  // ナビゲーション
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // スクロールバー
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

基本的な実装

矢印をクリックしたらスライドするのみ

See the Pen Untitled by chisato (@mgkita) on CodePen.

JSにパラメーターなどを追加することで色んな動きをつけることができます。

※「値」を記述する際はtrue・false、数字以外は""か''で囲う

例）

loop: true：最後までいったら1枚目に戻ってループする
effect: 'fade' ：スライドしたときにフェードしながら画像が切り替わる
slidesPerView: 任意の数字：仮に3を指定すると、3枚横並びで表示される

など

↓公式より

応用ver

汎用的なスライダーを作成しました。
今回は実装してませんが、もっと見るをクリックすると画像一覧のようなページにとぶイメージのスライダーです。

See the Pen Untitled by chisato (@mgkita) on CodePen.

JS

const mySwiper = new Swiper(".cat-slider", {
  spaceBetween: 50,
  width: 370,
  breakpoints: {
    767: {
      spaceBetween: 15,
      width: 290,
      slidesPerView: 1
    }
  },
  navigation: {
    nextEl: ".swiper-button-next--cat",
    prevEl: ".swiper-button-prev--cat"
  }
});

spaceBetween：画像と画像の幅を指定
width：画像自体の横幅を指定
breakpoints：767px以下の時のスタイルを指定
slidesPerView：横幅100%としたときに画像を何枚見せるか
navigation：両端の矢印を設置

JS部分はこれだけの記述で完成！

まとめ

SwiperはJSを数行書くだけで動くものができてしまうので、手早くスライダーを作成したいときに便利です。
ただ複雑なレイアウトになると難しい部分もあったので、cssを使ったスライダーなどとうまく使い分けれるようにしていきたいと思いました。

おまけ

今回使用した画像は、私の先輩のおうちのにゃんこちゃん達でした！
快く提供してくださり、スペシャルサンクスです！！

可愛すぎるので最後にもう一度貼っておきます。
皆さんもぜひ癒されてください。