swiper: Gallery not working when container div is hidden (display:none)
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 an 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>
Maybe there is a javascript trick? I read about a setTimeout function that could fix this issue. Any suggestion?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 3
- Comments: 22 (1 by maintainers)
It is far easier than this. Just add:
To the swiper initialization.
@wwwwwwoorks, thanks it works 👍