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