Question

我希望在点击“显示图库”链接后显示swiper库。但是如果在隐藏的div中初始化，看起来Swiper无法正常工作。

这是我的页面：

class Something < ApplicationRecord

  before_destroy :can_destroy?

  private

  def can_destroy?
    if model.something?
      errors[:base] << "Can't be destroy because of something"
      throw :abort
  end
end

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

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

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

Answer 1

我发现了这些听众：

observer: true

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

observeParents: true

observeParents 如果您还需要观看Swokes父元素的Mutations，则设置为true

Answer 2

尝试调用方法

swiper.update();

显示滑块

时

iDangero.us Swiper在div设置隐藏显示内部时无法正常工作：无

2 个答案: