PR
TIPS

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が正確に初期化され、スライダーが正常に動作します。

この記事を書いた人
Naokazu Yokoo

エンジニア歴20年以上。現在はWeb / AI領域で活動中。
開発環境・サーバー環境ともに速度と効率性を追求しています。

Follow Naokazu Yokoo
Follow Naokazu Yokoo

Comment

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