• Swiper

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スライダーで外部の関数から動的にスライド位置を変更する方法について紹介しました。

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