モジュール一覧

Swiplus はモジュール方式を採用しており、必要な機能だけをインポートして使用します。

コアモジュール

Swiper の基本機能に含まれるモジュールです。デフォルトで有効です。

モジュール	説明
`Swiper`	メインクラス。スライダーの初期化と基本操作を提供

ナビゲーションモジュール

モジュール	説明
`Navigation`	前へ/次へボタンを追加
`Pagination`	ページネーションドットを追加
`Scrollbar`	スクロールバーを追加

使用例

import { Navigation, Pagination } from '@swiplus/core/modules';

const swiper = new Swiper('.swiper', {
  modules: [Navigation, Pagination],
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
  pagination: { el: '.swiper-pagination', clickable: true },
});

エフェクトモジュール

モジュール	説明
`EffectFade`	フェードトランジション
`EffectCube`	3D キューブトランジション
`EffectFlip`	3D フリップトランジション
`EffectCoverflow`	カバーフローエフェクト
`EffectCards`	カードスタックエフェクト
`EffectCreative`	カスタムクリエイティブエフェクト

使用例

import { EffectFade } from '@swiplus/core/modules';

const swiper = new Swiper('.swiper', {
  modules: [EffectFade],
  effect: 'fade',
  fadeEffect: { crossFade: true },
});

操作・制御モジュール

モジュール	説明
`Autoplay`	自動再生機能
`Keyboard`	キーボード操作対応
`Mousewheel`	マウスホイール操作対応
`FreeMode`	フリーモードスクロール
`Controller`	複数スライダーの制御連携
`Manipulation`	スライドの動的追加・削除

使用例

import { Autoplay, Keyboard, Mousewheel } from '@swiplus/core/modules';

const swiper = new Swiper('.swiper', {
  modules: [Autoplay, Keyboard, Mousewheel],
  autoplay: { delay: 3000 },
  keyboard: { enabled: true },
  mousewheel: true,
});

アクセシビリティモジュール

モジュール	説明
`A11y`	アクセシビリティ対応（WAI-ARIA 対応）
`Accessibility`	追加のアクセシビリティ機能

ビューモジュール

モジュール	説明
`Zoom`	スライド内ズーム機能
`Lazy`	画像の遅延読み込み
`Parallax`	パララックスエフェクト
`Thumbs`	サムネイル連動
`Virtual`	仮想スライド（大量スライド向け）

Zoom の使用例

import { Zoom } from '@swiplus/core/modules';

const swiper = new Swiper('.swiper', {
  modules: [Zoom],
  zoom: { maxRatio: 3, toggle: true },
  pagination: { el: '.swiper-pagination' },
});

上級者向けモジュール

モジュール	説明
`History`	URL ハッシュとブラウザ履歴連携
`HashNavigation`	URL ハッシュナビゲーション
`Autoplay`	高度な自動再生設定
`Element`	Web Component（カスタム要素）対応

Swiplus 拡張モジュール

Swiplus 独自の拡張モジュールです。順次追加予定。

モジュール	説明	状態
`Tategaki`	縦書きスライド対応	準備中
`WarekiPagination`	和暦表示ページネーション	準備中

モジュールの設計思想

Swiper のモジュールシステムは、必要な機能だけをバンドルすることで最終的なバンドルサイズを最小限に抑えるよう設計されています。

// 必要なモジュールだけをインポート
import Swiper from '@swiplus/core';
import { Navigation, Pagination, Autoplay } from '@swiplus/core/modules';

const swiper = new Swiper('.swiper', {
  modules: [Navigation, Pagination, Autoplay],
  // ...設定
});

使用しないモジュールはインポートしないことで、バンドルサイズを削減できます。