光滑的旋转木马空白

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,
        slidesToScroll: 1,
        fade: true,
        initialSlide: index,
        focusOnSelect: true
    });
})
$(".close").on("click", function() {
    $(".overlay-carousel-container").css("display","none");
    $("body").css("overflow", "inherit");
    $("#overlayCarousel").slick("unslick");
    $("#executiveOverlay").slick("unslick");
});

Answer 1

Jqueryattr()函数returns一个字符串值。当您将其传递给灵活的构造函数时，它会将其转换为不同的数字。

添加一个简单的 Number() 函数将索引更改为数字应该可以解决您的问题。只需将以下中间线放在我放置的线之间：

var index = $(this).attr("data-slick-index");
index = Number(index);
$(".overlay-carousel-container").css("display", "block");

Answer 2

这个答案是为那些正在苦苦挣扎的人准备的，因为我也遇到了很多问题，尽管它看起来很容易，但我发现它有很多限制。

很老
要获得与提到的完全相同的外观，它需要 CSS(SCSS)，这在开发中很难做到，作为新用户，我很晚才意识到这一点。或者您无法轻松获得外观完全相同的点和箭头。
其他几个问题，例如提到的 here 和我在堆栈流中发现的其他问题。

我在类似过程中使用的最好的就是这里提到的那个这是最新的并附带一个简单的 tutorial 以及

推荐给开发新手。

光滑的旋转木马空白

Slick Carousel Blank

javascript

jquery

carousel

slick.js