光滑的旋转木马空白幻灯片

Question

我设置了一个覆盖光滑的旋转木马，因此当您单击图像时，会出现一个更大的旋转木马，并将所选图像作为初始幻灯片。但是，Slick carousel 在 initialSlide 之后添加了几个空白幻灯片。有谁知道为什么？另外，如何在关闭时重新启动覆盖轮播？

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

Answer 1

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

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

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

请注意，这里不允许 post 一口气问 2 个问题。此外，最好在您的代码中添加一个 JSfiddle，这样我们就可以找出问题所在。所以我认为你最好用完整的代码示例打开一个新问题，然后编辑这个问题以仅解决我已经尝试为你解决的问题。

光滑的旋转木马空白幻灯片

Slick Carousel Blank Slides

jquery

carousel

slick.js