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

モーダル表示で、ボタンを押すとカルーセルが現れるように、初期状態を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,

参考記事
https://github.com/nolimits4web/swiper/issues/1981