javascript - iDangero.us Swiper 在 div 内设置隐藏显示时不起作用 :none

Question

我希望在单击“显示图库”链接后显示滑动器图库。但如果在隐藏的 div 中初始化，Swiper 似乎无法正常工作。

这是我的页面:

<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>

此解决方法对我不起作用:

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

也许还有另一个 javascript 技巧？有什么建议吗？

Answer 1

我发现了这些听众:

observer: true

观察者设置为 true 以在 Swiper 及其元素上启用 Mutation Observer。在这种情况下，如果您每次更改其样式(如隐藏/显示)或修改其子元素(如添加/删除幻灯片)，Swiper 都会更新(重新初始化)

observeParents: true

观察 parent 如果您还需要观察 Swiper 父元素的突变，请设置为 true