Question

我设置了一个叠加光滑的旋转木马，所以当你点击图像时会出现一个更大的旋转木马，所选图像作为initialSlide。然而，Slick轮播在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

为了重新启动叠加滑块，我建议你＆＃34; kill＆＃34;当用户关闭它时。通过这种方式，onclick将使用相关的索引幻灯片再次构建它。

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

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

请注意，此处不允许在一个帖子中提出2个问题。此外，最好在您的代码中添加JSfiddle，以便我们可以尝试找出问题所在。所以我认为你最好用一个完整的代码示例打开一个新问题，并留下编辑这个问题，以便只解决我试过为你解决的问题。

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

1 个答案: