圓滑的傳送帶空白

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,
        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

jQuery attr()函數返回一個字符串值。 當您將其傳遞給光滑的構造函數時，它將轉換為另一個數字。

添加一個簡單的Number()函數將索引更改為數字應該可以解決您的問題。 只需在我放置的行之間放置以下中間線：

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

Answer 2

這個答案是針對那些在光滑的旋轉木馬上掙扎的人的，因為我也面臨着很多問題，盡管它看起來像上面提到的那樣非常容易，但是我發現它有很多局限性。

1. 很古老
2. 要具有與上述完全相同的外觀，它需要CSS（SCSS），這在開發中很難做到，作為一個新用戶，我很晚才意識到這一點。 否則，您不會輕易獲得具有完全相同外觀的點和箭頭。
3. 其他一些問題，例如此處提到的問題以及我在堆棧流中發現的其他問題。

我在類似過程中使用的最好的方法是這里提到的最新方法，並且還附帶了一個簡單的教程

推薦給新手初學者。