Issue with Slick Carousel in AJAX modal (Foundation Reveal)

I'm using Reveal to show more info and within that there's a carousel using Slick. The content inside the Reveal modal is pulled in via AJAX.

The problem I'm seeing is that when Reveal opens up, the carousel loads without the first image, moves to the second image (where there's a delay in loading), and then works normally after that. Here's a short video as an example: http://cl.ly/323s1T1x3I21

I'm not sure how to get the images to load faster.

My code looks something like the following...

Page code:

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

Code for page that gets pulled into :

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

Not sure how to fix. Would appreciate any help.

So JS had to be changed as follows:

$("#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
        });
    });

More info here: http://foundation.zurb.com/forum/posts/23183