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

以前作ったJavaScriptの絞り込み機能とSwiperを組み合わせたらスライド位置がそのままで何も表示されない事象が発生。手動で追加・削除、表示・非表示したときはswiper.update()が必要らしい。動作環境: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

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

はい

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

コメントを残す