メソッドリファレンス

Swiper インスタンスのメソッドを使用して、スライダーをプログラムから操作できます。

const swiper = new Swiper('.swiper');
swiper.slideNext();       // 次のスライドへ
swiper.slidePrev();       // 前のスライドへ
swiper.slideTo(3);        // 4番目のスライドへ（0ベース）

スライド移動メソッド

メソッド	戻り値	説明
`slideNext(speed?, runCallbacks?)`	`boolean`	次のスライドに移動
`slidePrev(speed?, runCallbacks?)`	`boolean`	前のスライドに移動
`slideTo(index, speed?, runCallbacks?)`	`boolean`	指定したインデックスのスライドに移動
`slideToClosest(speed?, runCallbacks?)`	`boolean`	最も近いスライドにスナップ
`slideToLoop(index, speed?, runCallbacks?)`	`boolean`	ループモードで指定スライドに移動
`slideToClickedSlide()`	`void`	クリックされたスライドに移動

例

// 3番目のスライドにアニメーションなしで移動
swiper.slideTo(2, 0);

// 次のスライドにコールバックなしで移動
swiper.slideNext(300, false);

初期化 / 破棄メソッド

メソッド	戻り値	説明
`init()`	`void`	Swiper を初期化
`destroy(deleteInstance?, cleanStyles?)`	`void`	Swiper を破棄し、元の状態に戻す

例

const swiper = new Swiper('.swiper', { init: false });
swiper.init(); // 手動で初期化

// 後で破棄
swiper.destroy();

有効 / 無効メソッド

メソッド	戻り値	説明
`enable()`	`void`	Swiper を有効化
`disable()`	`void`	Swiper を無効化（タッチ操作とトランジションを無効にする）

例

// Swiper を一時的に無効化
swiper.disable();

// 再び有効化
swiper.enable();

更新メソッド

メソッド	戻り値	説明
`update()`	`void`	Swiper の位置とサイズを再計算
`updateSize()`	`void`	Swiper のサイズを再計算
`updateSlides()`	`void`	スライドの位置とサイズを再計算
`updateAutoHeight(speed?)`	`void`	アクティブスライドの高さに自動調整
`updateProgress()`	`void`	スライダーの進行度を再計算
`updateSlidesClasses()`	`void`	スライドのクラスを再適用

例

// スライドを動的に追加した後
swiper.appendSlide('<div class="swiper-slide">New Slide</div>');
swiper.update();

サイズ / 寸法メソッド

メソッド	戻り値	説明
`getSlideIndex(slideEl)`	`number`	指定したスライド要素のインデックスを返す
`getActiveIndex()`	`number`	現在の `activeIndex` を返す
`getRealIndex()`	`number`	ループを考慮した実際のインデックスを返す
`getTranslate()`	`number`	現在のトランスレート値を返す
`setTranslate(translate, speed?)`	`void`	トランスレート値を設定

例

const activeIndex = swiper.getActiveIndex();
const realIndex = swiper.getRealIndex(); // ループモードでも実際のインデックス

スライド操作メソッド

メソッド	戻り値	説明
`appendSlide(slides)`	`void`	最後にスライドを追加
`prependSlide(slides)`	`void`	先頭にスライドを追加
`addSlide(index, slides)`	`void`	指定した位置にスライドを追加
`removeSlide(slideIndex)`	`void`	指定したスライドを削除
`removeAllSlides()`	`void`	すべてのスライドを削除

例

// 新しいスライドを追加
swiper.appendSlide('<div class="swiper-slide">新しいスライド</div>');

// 先頭に追加
swiper.prependSlide('<div class="swiper-slide">先頭スライド</div>');

// 2番目の位置に追加
swiper.addSlide(1, '<div class="swiper-slide">2番目に挿入</div>');

// 3番目のスライドを削除（インデックス 2）
swiper.removeSlide(2);

イベント制御メソッド

メソッド	戻り値	説明
`on(event, handler)`	`void`	イベントハンドラを登録
`once(event, handler)`	`void`	一度だけ実行されるイベントハンドラを登録
`off(event, handler?)`	`void`	イベントハンドラを解除
`offAll()`	`void`	すべてのイベントハンドラを解除
`emit(event, ...args)`	`void`	イベントを発行

例

// イベント購読
swiper.on('slideChange', () => {
  updateIndicator(swiper.activeIndex);
});

// 一度だけ購読
swiper.once('init', () => {
  console.log('Initialized for the first time');
});

自動再生制御メソッド

メソッド	戻り値	説明
`autoplay.start()`	`void`	自動再生を開始
`autoplay.stop()`	`void`	自動再生を停止
`autoplay.pause()`	`void`	自動再生を一時停止
`autoplay.resume()`	`void`	自動再生を再開
`autoplay.run()`	`void`	自動再生を実行

ロック制御メソッド

メソッド	戻り値	説明
`lock(mode?)`	`void`	Swiper のタッチ操作をロック（`mode` 指定時は方向ロック）
`unlock()`	`void`	Swiper のタッチ操作のロックを解除
`lockSwipeToNext()`	`void`	次のスライドへのスワイプをロック
`lockSwipeToPrev()`	`void`	前のスライドへのスワイプをロック
`lockSwipes()`	`void`	全方向のスワイプをロック
`unlockSwipeToNext()`	`void`	次のスライドへのロックを解除
`unlockSwipeToPrev()`	`void`	前のスライドへのロックを解除
`unlockSwipes()`	`void`	全方向のスワイプロックを解除

設定メソッド

メソッド	戻り値	説明
`changeDirection(direction, needUpdate?)`	`void`	スライド方向を変更
`setProgress(progress, speed?)`	`void`	スライダーの進行度を設定（0-1）

例

// 方向を縦に変更
swiper.changeDirection('vertical');

// 進行度を50%に設定
swiper.setProgress(0.5);

その他のメソッド

メソッド	戻り値	説明
`attachEvents()`	`void`	イベントリスナーをアタッチ
`detachEvents()`	`void`	イベントリスナーをデタッチ
`fixLoop()`	`void`	ループの位置を修正
`reLoop()`	`void`	ループを再構築
`unsetGrabCursor()`	`void`	グラブカーソルを解除
`setGrabCursor()`	`void`	グラブカーソルを設定

プロパティ

メソッドではありませんが、よく使われるプロパティも併せて紹介します。

プロパティ	型	説明
`swiper.activeIndex`	`number`	現在のアクティブスライドのインデックス
`swiper.realIndex`	`number`	ループを考慮した実際のインデックス
`swiper.isBeginning`	`boolean`	最初のスライドかどうか
`swiper.isEnd`	`boolean`	最後のスライドかどうか
`swiper.slides`	`HTMLElement[]`	全スライド要素の配列
`swiper.width`	`number`	Swiper の幅
`swiper.height`	`number`	Swiper の高さ
`swiper.params`	`object`	Swiper の現在のパラメータ

// 現在のスライドインデックスを取得
console.log('現在のスライド:', swiper.activeIndex);

// 先頭かどうかをチェック
if (swiper.isBeginning) {
  console.log('最初のスライドです');
}