How to properly initialize Swiper in Bootstrap’s Modal

In some cases, when incorporating Swiper (slider library) within Bootstrap’s Modal, initialization problems occur. This is because the Modal is hidden with display: none; when the page loads, so Swiper cannot calculate the exact slider size.

The recommended way to solve this problem is to initialize Swiper using the event when Modal is displayed (shown). The following JavaScript code is an example

$('.modal').on('shown.bs.modal', function (e) { 
 new Swiper ($('.swiper-container', this), { 
 // add Swiper options here 
 }); 
}); 

This way, Swiper is initialized exactly when Modal is displayed to the user, and the slider works correctly.