title: slick slide text overlaps for first slide class="slick-list.draggable" using jquery mobile
body: <p>I am still learning to crawl, but here goes:
   I have a JQuery mobile app, which uses the slick carousel jqm plugin.  On the first page of the app, I want to autoplay 4 images (slides) and I want to sync each image to it's own slide content which should be displayed underneath.  Using slick, this all seems to work, except the text displayed for the first slide on the first iteration is not formatted correctly and it appears as if the proper css class has not yet been associated with the text.  The .css class associated with the text appears to be slick-list.draggable.  For the second iteration the text appears properly with a .css classes of slick-slide slick-active.  My  code looks like this:</p>
  
  <pre><code>$(window).on('load', function() {
      $('.slideContent').slick({
      slidesToShow : 1,
      slidesToScroll : 1,
      asNavFor : '.slideshow',
      dots : true,
      });
  
      $('.slideshow').slick({
          slidesToShow : 1,
          slidesToScroll : 1,
          autoplay : true,
          autoplaySpeed : 10000,
          initialSlide : 4,
          asNavFor : '.slideContent',
          mobileFirst : true,
          dots : true
       });
  });
  </code></pre>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div id="#slides" class="slideshow"&gt;
              &lt;div class="slide"&gt;
                  &lt;img src="images/slide1.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="slide"&gt;
                  &lt;img src="images/slide2.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="slide"&gt;
                  &lt;img src="images/slide3.jpg" alt=""&gt;
              &lt;/div&gt;
              &lt;div class="slide"&gt;
                  &lt;img src="images/slide4.jpg" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- end of slideshow --&gt;
          &lt;div class="slideContent"&gt;
              &lt;div&gt;
                  &lt;h3&gt;abc&lt;/h3&gt;
                  abc123
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;h3&gt;xyz&lt;/h3&gt;
              xyz1234
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;h3&gt;dfg&lt;/h3&gt;
                  dfg
              &lt;/div&gt;
  
              &lt;div&gt;
                  &lt;h3&gt;mnp&lt;/h3&gt;
                  lkj
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- end of slideContent --&gt;
  </code></pre>
  
  <p>I will be happy to provide additional information.  Thanks for any suggestions!
  JT</p>
  
  <p><img src="https://i.stack.imgur.com/u7XPP.png" alt="overlapping text"></p>