Verwenden der Variable in jQuery Slick Diashow zum Festlegen der ersten Folie funktioniert nicht

Question

Ich verwende eine Diashow auf meiner Website mit jQuery Slick.

Meine Diashow ist ausgeblendet, wenn die Seite geladen ist, und ich habe einige Miniaturen, auf die ich klicken kann, um meine Diashow zu öffnen.
Jedes Thumbnail hat ein Datennummerattribut (meine Variable), und wenn ich auf ein Thumbnail klicke, öffnet sich meine Slideshow selbst, und die erste Folie sollte eingestellt werden, je nachdem welche Thumbnails angeklickt wurden.

Hier ist mein Code ohne die Variable. Ich wähle Daumen 4 nur für das Beispiel, und es funktioniert gut:

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

Sie sehen es auf this jsFiddle arbeiten.

Nun, wenn ich versuche, für die initialSlide eine Variable in meinem Code zu setzen, ist der erste Schlitten in Ordnung, aber wenn ich auf „weiter“ klicken, meine Diashow verschwinden oder nicht richtig funktioniert ...
Versuch für Beispiel Daumen 7 ...

Hier ist mein Code:

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

diese jsFiddle sehen sie in Aktion zu sehen: wenn Sie auf nächsten nach der Diashow angezeigt wird, werden Sie sehen das Problem.

Ich weiß nicht, was ich falsch mache, kann mir jemand dabei helfen?

Dank

Answer 1

tl; dr Verwendung parseInt mit $(this).attr("data-number") oder $(this).data("number")

Habe ich nur noch parseInt(initialSlide) und es scheint das Problem behoben zu haben.

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

Edit: Sie jQuery Data method direkt verwenden können, statt $(this).attr(...), die automatisch in int zu werfen scheint.

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