iDangero.us Swiper not working when inside a div set hidden display:none

Question

I want the swiper gallery to show after clicking on a "Show the gallery" link. But it looks like Swiper is not working properly if initialized inside a hidden div.

Here is my page:

<div>
<a href=“javascript:;” onclick=“toggle_visibility('gallery');”><img src=“img.jpg” alt=“Click to open the gallery”></a>
</div>

<div id=“gallery” style:“display:none”>
<!— Swiper —>
<div id=“slide-event” class=“swiper-container swiper-container-event”>
<div class=“swiper-wrapper”>
…
</div>
<!— Add Arrows —>
<div id=“show-hide” class=“swiper-button-next”></div>
<div id=“show-hide” class=“swiper-button-prev”></div>
</div>
<!— End Swiper —>
</div>

<script src="js/swiper.jquery.js"></script>

This workaround doesn't work for me:

function reinitSwiper(swiper) {
  setTimeout(function () {
   swiper.reInit();
  }, 500);
}

Maybe there is another a javascript trick? Any suggestion?

Answer 1

I found out these listeners:

observer: true

observer Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides)

observeParents: true

observeParents Set to true if you also need to watch Mutations for Swiper parent elements