Swiper内でフィルタリングしたときスライド位置を先頭に戻す【JavaScript】

以前作ったJavaScriptの絞り込み機能をSwiperに適用してみたところ、スライド位置がそのままになってしまい何も表示されない事象が発生。これはその対策メモ。動作環境:ver5.4.5

結論

絞り込み処理の中でSwiperAPIメソッドを実行する。

/*** 仮にこう初期化していたとする ***/
const mySwiper = new Swiper('.swiper', {
  speed: 400,
});
mySwiper.update();
mySwiper.slideTo(0);

update()について

以下のメソッドもまとめて実行してくれるらしい。

  • updateAutoHeight()
  • updateProgress()
  • updateSize()
  • updateSlides()
  • updateSlidesClasses()

swiper.update()
スライドを手動で追加/削除した後、スライドを非表示/表示した後、またはSwiperを使用してカスタムDOM変更を行った後に呼び出す必要があります。このメソッドには、個別に使用できる次のメソッドのサブ呼び出しも含まれます。

引用元:Swiper API

この記事は役に立ちましたか?

はい(以下をポチッと)

ブログランキング・にほんブログ村へ

コメントを残す