🍣

【Swiper.js】初期状態を非表示にすると挙動がおかしくなるバグへの対処法

2022/05/26に公開

モーダル表示で、ボタンを押すとカルーセルが現れるように、初期状態をdisplay: none; で実装していたところ、思うように動かなかったのでその対処法

以下のようなものを作ろうとしていました
このようなものを作ろうとしていた

解決法

var mySwiper = new Swiper ('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination'
  }
  observer: true, //これが大事!
  observeParents: true, //これが大事!
});

↓インスタンス作成時にこのコードを加えると綺麗に動くようになりました。

  observer: true,
  observeParents: true,

Discussion