Rails：如何在模态框内渲染光滑的滑块答案

【问题标题】：Rails: How to render slick slider inside modalRails：如何在模态框内渲染光滑的滑块
【发布时间】：2018-03-01 15:00:35
【问题描述】：

我有一个被多次渲染的部分，每个部分都有一个 Foundation 模式。在这个模态中，我想使用光滑的滑块。由于在加载 slick 时未显示元素，因此未显示图像。如果我调整窗口大小，则会显示图片。

互联网上有很多这样的问题（主要是标签），但他们的修复都没有帮助我。

我的代码如下所示：

<% @names.each do |n| %>
  <div class="name-card" id="name-<%= n.id %>">
    <%= render partial: 'name_card', locals: {n: n} %>
  </div>
  <div id="name-modal-<%= n.id %>" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <%= render partial: 'name_modal', locals: {n: n} %>
  </div>
<% end %>

_name_card.html.erb

<p> n.name </p>
<p> n.surname </p>
<a href="#" data-reveal-id="name-modal-<%= n.id %>"> OPEN </a>

_name_modal.html.erb

<div id="name-modal-image-<%=n.id%>">
  <%= image_tag "selfie.jpg" %>
  <%= image_tag "portrait.jpg" %>
</div>

<script>
  $("div[id^=name-modal-image-]").not('.slick-initialized').slick();
</script>

我尝试了各种我发现的建议：

var selector = $("div[id^=box-modal-image-]");


selector[0].slick.setPosition();  //option1

$('.reveal-modal').on('opened', function() {
    $(selector).slick("setPosition", 0);
});      //option2

$(window).trigger(‘resize’);   //option3

window.dispatchEvent(new Event(‘resize’));   //option4

但它们都不起作用。有没有人有任何其他建议如何克服这个问题？谢谢！

【问题讨论】：

标签： javascript ruby-on-rails zurb-foundation zurb-foundation-6

【解决方案1】：

Foundation Sites 使用事件 open.zf.reveal 进行展示。

https://foundation.zurb.com/sites/docs/reveal.html#javascript-reference

【讨论】：