Question

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

互联网上有很多类似的问题（主要是标签），但没有修复对我有帮助。

我的代码看起来像这样：

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

但他们都没有奏效。有没有人有任何其他建议如何克服这个问题？谢谢！

Answer 1

基金会网站使用活动open.zf.reveal进行展示。

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

Rails：如何在模态中渲染光滑的滑块

1 个答案: