開発 2024.03.28

Swiperオプションを完全解説！スライダーを自在にカスタマイズ

1 はじめに
2 1. Swiperオプションの概要
3 2. 主要なオプション
4 3. オプションの使用方法
5 4. オプションの詳細
6 5. Swiperオプションの応用例
7 6. まとめ

はじめに

Swiperは、高機能で使いやすいJavaScriptライブラリとして、Web制作において広く利用されているスライダー作成ツールです。豊富なオプションを搭載しており、自由度の高いデザインを実現できます。

前回の記事では、Swiperの基本的な使い方を解説しました。

本記事では、Swiperのオプションについて、詳細に解説していきます。オプションを理解することで、より自由度の高いスライダーを作成することができます。

1. Swiperオプションの概要

Swiperには、様々なオプションが用意されています。これらのオプションを組み合わせることで、理想のスライダーを作成することができます。

オプションの種類

基本設定: スライドの方向、表示するスライドの数、スライド間のスペースなど
アニメーション: スライド間のアニメーション効果、速度など
操作: ページネーション、ナビゲーションボタン、タッチ操作など
その他: オートプレイ、ループ再生、レスポンシブデザインなど

2. 主要なオプション

以下は、Swiperの主要なオプションの一例です。

direction: スライドの方向（’horizontal’ or ‘vertical’）
slidesPerView: 表示するスライドの数
spaceBetween: スライド間のスペース
loop: ループ再生
autoplay: オートプレイ
pagination: ページネーションの表示
navigation: ナビゲーションボタンの表示
effect: スライド間のアニメーション効果
speed: スライドアニメーションの速度
breakpoints: デバイスの画面サイズに応じて設定を変更

3. オプションの使用方法

オプションを使用するには、以下の手順で設定します。

手順1：JavaScriptで初期化する

以下のJavaScriptコードで、Swiperを初期化します。

const swiper = new Swiper('.swiper-container', {
  // オプション
});

手順2：オプションを設定する

{}内に、設定したいオプションを記述します。

const swiper = new Swiper('.swiper-container', {
  direction: 'vertical', // スライドの方向を垂直方向に設定
  slidesPerView: 3,       // 3つのスライドを同時に表示
  spaceBetween: 50,      // スライド間のスペースを50pxに設定
  loop: true,           // ループ再生を有効にする
  autoplay: {
    delay: 3000,      // オートプレイの時間を3秒に設定
  },
  pagination: {
    type: 'bullets',  // ページネーションの種類を丸い点に設定
  },
  navigation: {
    prevEl: '.swiper-button-prev', // ナビゲーションボタンの要素を指定
    nextEl: '.swiper-button-next', // ナビゲーションボタンの要素を指定
  },
  effect: 'fade',     // スライド間のアニメーション効果をフェードに設定
  speed: 600,       // スライドアニメーションの速度を600msに設定
  breakpoints: {
    640: {
      slidesPerView: 2, // 画面サイズが640px以下の場合、2つのスライドを同時に表示
    },
    1024: {
      slidesPerView: 4, // 画面サイズが1024px以下の場合、4つのスライドを同時に表示
    },
  },
});