Проблема со скользкой каруселью в AJAX-модале (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