Как устранить глюк или ошибку swiper в collapse блоке bootstrap?

Question

[lilzen]

Приветствую товарищи помогите понять и исправить ошибку с swiper слайдером...
Короче swiper находится в div class="collapse" скрытом блоке bootstrapa. Проблема в том что при загрузке страницы swiper не работает его можно прокрутить мышкой, но работает он не корректно! Но стоит открыть окно разработчика и он начинает работать нормально!!!!
ХЕЛП бьюсь уже 3 часа! Вот код инициализации swiper'a

$(document).ready(function() {
    var swiper = new Swiper('.swiper-container', {
      zoom: true,
      pagination: {
        el: '.swiper-pagination',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  });

забыл упомянуть что без класса collapse все так же работает нормально....

<div  id="fonpr1" class="container-fluid collapse">
        <div class="row">
            <style type="text/css">
            .swiper-container {
              width: 100%;
              height: 300px;
            }
            .swiper-slide {
              overflow: hidden;
            }
            </style>
            <!-- Swiper -->
              <div class="swiper-container">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                      <img src="assets/img/usl/fund1.jpg">
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                      <img src="assets/img/usl/fund2.jpg">
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                      <img src="assets/img/usl/fund3.jpg">
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="swiper-zoom-container">
                      <img src="assets/img/usl/fund4.jpg">
                    </div>
                  </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination swiper-pagination-white"></div>
                <!-- Add Navigation -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
      </div>
</div>

Answer 1

[Алекс Глебов]

При открытии свипера можно вызвать событие ресайза окна

try {         
          window.dispatchEvent(new Event('resize'));
        } catch (e) {
          var resizeEvent = window.document.createEvent('UIEvents');
          resizeEvent.initUIEvent('resize', true, false, window, 0);
          window.dispatchEvent(resizeEvent);
        }

либо
mySwiper.update();

либо mySwiper.destroy() и заново инициализировать

Comments

[Сергей delphinpro]

Дополняю объяснением: слайдер инициализируется на скрытых блоках. Скрытые блоки не имею размеров, отсюда проблемы. Нужно повесить слушателя на событие shown.bs.collapse на аккордионе и в нем производить обновление слайдера. Или даже инициализацию, слайдер все равно не нужен, пока его не видно.