Rails：如何在模态内渲染平滑滑块

Question

I have a partial which is being rendered multiple times, and each partial has a Foundation modal. Inside this modal I want to use slick slider. As the element is not shown when slick is being loaded the images are not shown. If I resize the window the picture is displayed.

There are many issues like this across the internet (mainly with tabs) but non of their fixes helped me.

My code looks something like this:

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

I tried various suggestions I found:

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

But none of them worked. Does anyone have any other suggestion how to overcome this problem? Thanks!

Answer 1

Foundation Sites uses the event open.zf.reveal for reveals.

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