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?

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?

• javascript
• html
• swiper.js

• I've tried with something like this: $('a').on('click', function reinitSwiper(swiper) { setTimeout(function () { swiper.reInit(); }, 500); }); It doesn't work. – Frédéric Delaloire Commented Jan 13, 2017 at 16:10
• Well it is easier than this. Just add "observer: true, observeParents: true," to the Swiper initialization. – Frédéric Delaloire Commented Jan 13, 2017 at 20:52
• It works for me when I add as Frédéric Delaloire said. Thank you. – May Phyu Commented Jan 16, 2017 at 5:17

2 Answers 2

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

try to call the method

swiper.update();

when you display the slider