BootstrapのModal内のSwiperの正しい初期化方法

BootstrapのModalの中にSwiper(スライダーライブラリ)を組み込む際、初期化の問題が発生するケースがあります。これは、Modalがページの読み込み時にdisplay: none;の状態で非表示になっているため、Swiperが正確なスライダーサイズを計算できないからです。

この問題を解消するための方法として、Modalが表示されたとき(shown)のイベントを利用してSwiperを初期化する方法が推奨されます。以下のJavaScriptコードがその例です。

$('.modal').on('shown.bs.modal', function (e) {
  new Swiper ($('.swiper-container', this), {
    // Swiperのオプションをこちらに追加
  });
});

この方法により、Modalがユーザーに表示されるタイミングでSwiperが正確に初期化され、スライダーが正常に動作します。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール