jQueryで変数を使用する初期のスライドを設定するための滑らかなスライドショーが動作しません

Question

jQuery Slickを使用している私のウェブサイトでスライドショーを使用しています。

ページが読み込まれるとスライドショーが非表示になり、クリックするとサムネイルがいくつか表示され、スライドショーが開きます。
各サムネイルにはデータ番号属性（my変数）があり、サムネイルをクリックするとスライドショーが開き、どのサムネイルがクリックされたかに応じて初期スライドが設定されます。

ここに、変数のないコードがあります。私はちょうど例えば親指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のための私のコードで変数を入れしようとすると、最初のスライドはOKですが、私は、「次へ」をクリックして私のスライドショーが消えたり、正しく動作していない...
がためにしてみてください例の親指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; $(this).attr("data-number")か$(this).data("number")

とDR使用parseInt私はちょうど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); 
}); 

編集：あなたは自動的にint型にキャストする思われる、代わりに$(this).attr(...)の、直接jQuery Data methodを使用することができます。

$(".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); 
});