Как заставить работать 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">&times;</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,
    });

Ответы (0 шт):