Swiperを使ってスライダーアニメーションを実装する〜使い方編〜

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ Swiperの各クラスの役割やオプションについて

■ 関連記事
・ Swiperを使ってスライダーアニメーションを実装する〜導入編〜
・ Swiperを使ってスライダーアニメーションを実装する〜ページネーションやナビゲーションのカスタマイズ編〜

HTML

以下は公式の『Add Swiper HTML Layout』よりコピー＆ペーストしたものです。
それぞれのクラスの役割について順に説明します。

index.html

<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

基本的に全てdivタグで書かれていて、クラスと役割については以下の通りです。

クラス	役割
swiper-container	swiperに関することを記述していく全体を囲む
swiper-wrapper	その下のswiper-slideを囲む
swiper-slide	実際にスライドさせるコンテンツ ...はその後に追記できるという意味
swiper-pagination	コンテンツの下にある丸がたくさん並んでいる部分 現在どのスライドが表示されているか情報を表示
swiper-button-prev swiper-button-next	コンテンツ左右両端の矢印 prevが前に戻る（左）、nextが次に進む（右）
swiper-srollbar	現在どの位置にあるかスクロールバーとして表示

## JavaScript

こちらは公式の『Initialize Swiper』よりコピー&ペーストしたものです。
連想配列になっており、スライダー全体に関わる部分と、ページネーション・ナビゲーション・スクロールバーの設定を変更することができます。
尚、el（EL）はエレメントの略で、paginationであればswiper-paginationクラスと紐付けられており、
navigationのnextElであれば、swiper-button-nextクラスと紐付けられています。

```javascript
const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

オプション

公式のデモ一覧がありますので、デモの動きとソースコードを見ながら自身で調整して使います。
使用頻度が高そうなそれぞれ設定できる項目をコメントアウトしてまとめます。

const swiper = new Swiper('.swiper-container', {
  // Optional parameters
  direction: 'horizontal', // スライド方向(verticlal=縦方向)
  loop: true, // ループ設定
  speed: 1000, // 何秒かけてスライドを切り替える（ミリ秒:1000=1秒）
  effect: 'fade', // ふわっとアニメーションさせてスライドを切り替える
  slidesPerView: 1, // １度に表示するスライド数
  centeredSlides: true, //現在のスライドを中央に表示
  spaceBetween: 10, // スライド同士の余白

  // 自動再生
  autoplay: {
    delay: 2000 // 次のスライドに切り替わる時間の設定（ミリ秒:1000=1秒）
  },

  // レスポンシブ
  breakpoints: {
    // 画面幅が769px以上の設定
    769: {
      slidesPerView: 3,
    }
  },

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

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

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});