Проблема с Slick Carousel в AJAX modal (Foundation Reveal)

Question

Я использую Reveal, чтобы показать больше информации, и внутри этого есть карусель с использованием Slick. Содержимое внутри мода Reveal втягивается через AJAX.

Проблема, которую я вижу, заключается в том, что когда открывается Reveal, карусель загружается без первого изображения, перемещается на второе изображение (где происходит задержка загрузки), а затем нормально работает после этого. Вот короткое видео в качестве примера: http://cl.ly/323s1T1x3I21

Я не уверен, как получить изображения для загрузки быстрее.

Мой код выглядит примерно так ...

код страницы:

<div class="row"> 
<div class="large-16 columns right"> 
    <h4>...</h4> 

    <p>... <a href="http://url/to/data" data-reveal-id="modal-vineyard" data-reveal-ajax="true" class="learn-more">Learn More&#160;&raquo;</a></p> 
</div> 

<div class="large-8 columns left">    
    ... 
</div> 

код для страницы, которая получает втягивается:

<div class="inner-carousel"> 
    <div><img src="blah..."></div> 
    <div><img src="blah..."></div> 
</div> 

<!-- not including this results in slick not working at all --> 
<script> 
    $(document).ready(function() { 
    $('.inner-carousel').slick({ 
     autoplay: true, 
     autoplaySpeed: 4000, 
     arrows: false, 
     centerMode: true, 
     dots: true, 
     fade: true, 
     speed: 1000, 
     swipeToSlide: true 
    }); 
    }); // end ready 
</script> 

Не конечно, как исправить. Поблагодарили бы за любую помощь.

Answer 1

Так JS должен быть изменен следующим образом:

$("#modal-vineyard").on("opened", function() { 
     // $(".inner-carousel").slick("setPosition", 0); 
     $('.inner-carousel').slick({ 
      setPosition: 0, 
      autoplay: true, 
      autoplaySpeed: 4000, 
      arrows: false, 
      centerMode: true, 
      dots: true, 
      fade: true, 
      speed: 1000, 
      swipeToSlide: true 
     }); 
    }); 

Больше информации здесь: http://foundation.zurb.com/forum/posts/23183