在jQuery中使用變量Slick slideshow設置初始幻燈片不起作用

Question

我在我的網站上使用的幻燈片使用jQuery Slick。

當頁面加載時，我的幻燈片顯示被隱藏，我有一些縮略圖可以點擊打開我的幻燈片。
每個縮略圖都有一個數據編號屬性（我的變量），當單擊縮略圖時，我的幻燈片會自行打開，並且應該根據點擊哪個縮略圖來設置初始幻燈片。

這是我的代碼沒有變量。我選擇拇指4只爲例子，它工作正常：

$(".thumb").click(function(){ 
    $(".slider").show(); 
    setTimeout(function(){ 
    $('.slider').slick({ 
     slidesToShow: 4, 
     slidesToScroll: 1, 
     centerMode: true, 
     initialSlide : 4, 
     infinite: true, 
     prevArrow : $('.prev'), 
     nextArrow : $('.next')}); 
    $(".slider").css("opacity", 1); 
    }, 2000); 
}); 

你可以看到它工作this jsFiddle。

現在，當我試圖把一個變量在我的initialSlide碼，最初的滑動是好的，但是當我點擊「下一步」，我的幻燈片消失或不能正常工作...
拉昇例如拇指7 ...

這裏是我的代碼：

$(".thumb").click(function(){ 
    var initialslide = $(this).attr("data-number"); 
    $(".slider").show(); 
    setTimeout(function(){ 
    $('.slider').slick({ 
     slidesToShow: 4, 
     slidesToScroll: 1, 
     centerMode: true, 
     initialSlide : initialslide, 
     infinite: true, 
     prevArrow : $('.prev'), 
     nextArrow : $('.next')}); 
    $(".slider").css("opacity", 1); 
    }, 200); 
}); 

看到這個jsFiddle看到它在行動：如果您在下一個單擊出現的幻燈片後，你會看到這個問題。

我不知道我做錯了什麼，有人可以幫我嗎？

感謝

Answer 1

TL;博士使用parseInt與$(this).attr("data-number")或$(this).data("number")

我只是說parseInt(initialSlide)，它似乎已經解決您的問題。

$(".thumb").click(function(){ 
    var initialslide = $(this).attr("data-number"); 

    $(".slider").show(); 
    setTimeout(function(){ 
    $('.slider').slick({ 
     slidesToShow: 4, 
     slidesToScroll: 1, 
     centerMode: true, 
     initialSlide : parseInt(initialslide), 
     infinite: true, 
     prevArrow : $('.prev'), 
     nextArrow : $('.next')}); 
    $(".slider").css("opacity", 1); 
    }, 200); 
}); 

編輯：可以使用jQuery Data method直接，而不是$(this).attr(...)，這似乎蒙上，自動將詮釋。

$(".thumb").click(function(){ 
    var initialslide = $(this).data("number"); 

    $(".slider").show(); 

    setTimeout(function(){ 
    $('.slider').slick({ 
     slidesToShow: 4, 
     slidesToScroll: 1, 
     centerMode: true, 
     initialSlide : initialslide, 
     infinite: true, 
     prevArrow : $('.prev'), 
     nextArrow : $('.next')}); 
    $(".slider").css("opacity", 1); 
    }, 200); 
});