iDangero.us Swiper 在 div 中设置隐藏显示时不起作用：无答案

【问题标题】：iDangero.us Swiper not working when inside a div set hidden display:noneiDangero.us Swiper 在 div 中设置隐藏显示时不起作用：无
【发布时间】：2017-01-13 15:48:39
【问题描述】：

我希望在点击“显示图库”链接后显示滑动图库。但是如果在隐藏的 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 技巧？有什么建议吗？

【问题讨论】：

我试过这样的东西： $('a').on('click', function reinitSwiper(swiper) { setTimeout(function () { swiper.reInit(); }, 500);});它不起作用。
嗯，这比这更容易。只需在 Swiper 初始化中添加“observer: true, observeParents: true”即可。
正如 Frédéric Delaloire 所说，当我添加时，它对我有用。谢谢。

标签： javascript html swiper

【解决方案1】：

我发现了这些听众：

observer: true

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

observeParents: true

观察父母如果您还需要查看 Swiper 父元素的 Mutations，请设置为 true

【讨论】：

【解决方案2】：

尝试调用方法

swiper.update();

当你显示滑块时

【讨论】：