スライドを簡単に実装できるJavaScriptライブラリ「Swiper」

Swiperというライブラリを使うと、スライドが簡単に実装できます。
jQueryにも依存していないピュアなJavaScriptのライブラリなので、かなり重宝しています。

• オプションが豊富でカスタマイズしやすい
• jQueryに依存しない
• スマホにも対応している

Swiperのインストール

Swiper

Swiper - The Most Modern Mobile Touch Slider

https://swiperjs.com

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

ローカルにファイルを設置したい場合は公式サイトからswiper.min.cssとswiper.min.jsをダウンロードして読み込みます。

CDNでの使用もできて、その場合は下記のコードを読み込みます。

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>

Swiperの使い方

スライドを使いたい場所に下記のHTMLを記述します。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライドの内容1</div>
    <div class="swiper-slide">スライドの内容2</div>
    <div class="swiper-slide">スライドの内容3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

あとは下記のJavaScriptでスライドが作成できます。

var mySwiper = new Swiper ('.swiper-container', {
  effect: "slide",
  loop: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination'
  }
});

See the Pen Swiper_basic by Masakazu Saito (@31mskz10) on CodePen.

左右のナビゲーション設定

左右のナビゲーションを設定したいときは下記のコードをJavaScriptに追加しつつ、.swiper-container内にHTMLを追加します。

navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
}

.swiper-button-nextと.swiper-button-prevであればSwiperのデフォルトCSSが反映されます。

基本的にはそこからCSSを上書きして使う方がラクそうです。

ページネーション設定

ページネーションを設定したいときは下記のコードをJavaScriptに追加しつつ、.swiper-container内にHTMLを追加します。

pagination: {
  el: '.swiper-pagination'
}

こちらも.swiper-paginationだとSwiperのデフォルトCSSが反映されます。

Swiperのオプション

Swiperのオプションはかなり多く、バージョンアップによって新しく追加されたり、変更も結構されます。

基本は公式のドキュメントを見てください（下記の表は公式のドキュメントを簡単に訳したものです）。

Swiper

Swiper API

https://swiperjs.com/api/#parameters

Most Modern Mobile Touch Slider

class名の管理

下記のオプションを使うと、class名の変更ができます。

しかし、実際に運用するときはclass名を変えてしまうとあとで訳が分からなくなってしまうのでオススメしません（特に複数人が関わる実装の場合）。

class名を変える代わりにオススメしたいのが、class名の追加です。

レスポンシブの設定

JavaScriptにbreakpointsを追加するとレスポンシブの設定ができます。

breakpoints: {
  // 320px以下の場合
  320: {
    slidesPerView: 1,
    spaceBetween: 10
  },
  // 480px以下の場合
  480: {
    slidesPerView: 2,
    spaceBetween: 20
  },
  // 640px以下の場合
  640: {
    slidesPerView: 3,
    spaceBetween: 30
  }
}

ブレークポイントは自分で指定して、その中にオプションを追加して指定します。