Как заставить работать Swiper.js в модальном окне Bootstrap?
Есть карусель с картинками, которую надо выводить в модальном окне. Однако, выводится из неё только первый слайд, остальные слайды пустые. Код такой:
<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content bg-white">
<div class="modal-header">
<h5 class="modal-title text-primary" id="itemModalLabel">Заголовок</h5>
<button type="button" class="close text-primary" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body pt-0 pb-0">
<div class="swiper itemSwiper">
<div class="swiper-wrapper mb-3">
<div class="swiper-slide"><img src="/img1.jpg"></div>
<div class="swiper-slide"><img src="/img2.jpg"></div>
<div class="swiper-slide"><img src="/img3.jpg"></div>
...
<div class="swiper-slide"><img src="/imgN.jpg"></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
</div>
И яваскрипт свайпера
var itemswiper = new Swiper(".itemSwiper", {
slidesPerView: "auto",
spaceBetween: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
mousewheel: true,
});