油滑旋轉木馬空白

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()函數返回一個字符串值。當你將它傳遞給漂亮的構造函數時，它會將它轉換爲不同的數字。

添加一個簡單的​​功能來改變指數的數值應該解決您的問題。只需在我放置的行之間放置以下中間行：

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