title: slick slider carousel starts before page loads
body: <p>Modifying my question and sure hope someone can help. I have slick slider set up. Am also using Foundation Zurb "tab" feature so a page opens with tabs across the top for navigation. Since the whole page loads, anything that is triggered by that initial page load (such as the slider) starts running even if people are not looking at that tab - and before the images themselves load completely. What I need is for the slider to begin an autorotation through the slide set and stop on the first slide as it completes one cycle. The slider itself is working - it is this initial start function I don't know how to do. I would expect there is some way to do this in the function call for the actual slider but I just don't know what javascript functions to use.</p>
  
  <p>My function call right now for the slider is as follows. But when people click the tab, it is starting on slide 1 but the slide never shows because it is still trying to load the images after someone moves to that page. It then opens slide 2 and finishes out correctly by going through remaining slides and coming back to one and stopping.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var item_length = $('.slide &gt; div').length - 1;
  var slider = $('.slide').slick({
  autoplay: true,
  autoplaySpeed: 5000,
  dots: true,
  infinite: false,
  speed: 2000,
  fade: true,
  slide: 'div',
  onAfterChange: function(){
  //check the length of total items in .slide container
  //if that number is the same with the number of the last slider
  //Then pause the slider
  if( item_length == slider.slickCurrentSlide() ){
  //this should do the same thing -&gt; slider.slickPause();
  slider.slickSetOption("autoplay",false,false)
  };
  } 
  });
  &lt;/script&gt;
  </code></pre>