このサイトには広告が含まれています

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

以前作った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変更を行った後に呼び出す必要があります。このメソッドには、個別に使用できる次のメソッドのサブ呼び出しも含まれます。

コメント欄

タイトルとURLをコピーしました