Jquery 光滑转盘空白幻灯片

我设置了一个覆盖光滑的旋转木马，所以当你点击图像时，会出现一个较大的旋转木马，所选图像作为初始幻灯片。然而，Slick carousel在初始幻灯片之后添加了几个空白幻灯片。有人知道为什么吗？此外，如何在关闭时重新启动覆盖转盘

    $("#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
        }); 
    })
<div class="overlay-carousel-container">
    <a class="close">&nbsp;</a>
        <div class="overlay-wrapper">
                <div class="overlay-img-wrapper"> 
                    <div class="overlay-carousel-nav" id="overlayCarousel">

                        <div class="overlay-slider-img"><img src="img/apparel/1.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/2.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/3.png"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/4.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/5.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/6.jpg"></div>
                        <div  class="overlay-slider-img"><img src="img/apparel/7.png"></div>


                    </div>  
                </div>
        </div>  
</div>      

$（“#sync1.item”）。在（“单击”，函数（）{
var指数=$（this.attr（“数据平滑指数”）；
$（“.overlay carousel container”）.css（“显示”、“块”）；
$（“body”）.css（“溢出”、“隐藏”）；
美元（“#overlycarousel”）。光滑({
幻灯片放映：1，
是的，
初始幻灯片：索引，
焦点选择：正确
}); 
})

为了重新启动覆盖滑块，我建议您在用户关闭它时“杀死”它。这样，onclick将使用相关的索引幻灯片再次构建它

只需将以下内容添加到覆盖关闭事件：

$("#overlayCarousel").slick("unslick");

---

请注意，这里不允许在一篇文章中提出两个问题。另外，最好在代码中添加一个JSFIDLE，这样我们就可以尝试找出哪里出了问题。因此，我认为您最好用完整的代码示例打开一个新问题，并将编辑此问题留给我尝试为您解决的问题。

谢谢。“unslick”在关闭事件中起作用。我将为第二期打开一个新项目。这里是新一期的链接：