Written by Kasumi

Swiperスライダーで外部の関数から動的にスライド位置を変更する方法

Swiperスライダーの実行関数外でスライド位置を動的に変更したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装サンプル

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

スライダー上のボタンを押すと、任意のスライド位置へ動的に変更されます。

実装コードは以下の通りです。

slideToメソッドを使おう

const swiper = new Swiper(".swiper", {});

function click01() {
  swiper.slideTo(0);
}
function click02() {
  swiper.slideTo(1);
}
function click03() {
  swiper.slideTo(2);
}

動的にスライドを変更するコード例です。

slideToメソッドを使います。

使い方は以下の通りです。

swiperの変数.slideTo(スライド開始位置);

上記を動的に変更する関数の中に記述します。

slideToメソッドの引数には0から始まるスライドの位置を数値で入れます。

以上で実装完了です。

まとめ

Swiperスライダーで外部の関数から動的にスライド位置を変更する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Swiper

Swiperスライダーで次のスライドを少し見せて表示する方法

2022.12.01
57
Swiper

Swiperスライダーで最初に表示されるスライド位置を変更する方法

更新日:2022.11.25
184
Swiper

【swiper】スライド時にズーム機能をつけれるスライダーを実装【簡単】

更新日:2022.11.25
1195
Swiper

Swiperでサムネイル固定のスライダーを実装する方法

更新日:2022.11.25
495