title: Slick Carousel Blank Slides
body: <p>I set up an overlay slick carousel, so when you click on the image a larger carousel appears with the selected image as the initialSlide. However, Slick carousel is adding several blank slides after the initialSlide. Does anyone know why? Also, how can I restart the overlay carousel upon close?</p>
  
  <pre><code>    $("#sync1 .item").on("click", function() {
  
          var index = $(this).attr("data-slick-index");
          $(".overlay-carousel-container").css("display", "block");
          $("body").css("overflow", "hidden");
          $("#overlayCarousel").slick({
            slidesToShow: 1,
              fade: true,
              initialSlide: index,
              focusOnSelect: true
          }); 
      })
  &lt;div class="overlay-carousel-container"&gt;
      &lt;a class="close"&gt;&amp;nbsp;&lt;/a&gt;
          &lt;div class="overlay-wrapper"&gt;
                  &lt;div class="overlay-img-wrapper"&gt; 
                      &lt;div class="overlay-carousel-nav" id="overlayCarousel"&gt;
  
                          &lt;div class="overlay-slider-img"&gt;&lt;img src="img/apparel/1.jpg"&gt;&lt;/div&gt;
                          &lt;div  class="overlay-slider-img"&gt;&lt;img src="img/apparel/2.jpg"&gt;&lt;/div&gt;
                          &lt;div  class="overlay-slider-img"&gt;&lt;img src="img/apparel/3.png"&gt;&lt;/div&gt;
                          &lt;div  class="overlay-slider-img"&gt;&lt;img src="img/apparel/4.jpg"&gt;&lt;/div&gt;
                          &lt;div  class="overlay-slider-img"&gt;&lt;img src="img/apparel/5.jpg"&gt;&lt;/div&gt;
                          &lt;div  class="overlay-slider-img"&gt;&lt;img src="img/apparel/6.jpg"&gt;&lt;/div&gt;
                          &lt;div  class="overlay-slider-img"&gt;&lt;img src="img/apparel/7.png"&gt;&lt;/div&gt;
  
  
                      &lt;/div&gt;  
                  &lt;/div&gt;
          &lt;/div&gt;  
  &lt;/div&gt;      
  </code></pre>