jQuery에서 변수 사용 초기 슬라이드 설정을위한 슬릭 슬라이드 쇼가 작동하지 않습니다.

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 코드에 변수를 넣으려고하면 초기 슬라이드가 정상이지만 "다음"을 클릭하면 슬라이드 쇼가 사라지거나 제대로 작동하지 않습니다.
try for 슬라이드 쇼가 나타난 후, 문제를 볼 수 있습니다 다음를 클릭하면 :

$(".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 행동에 그것을보고 참조 : 예를 들어 엄지 7 ... 여기

내 코드입니다.

내가 뭘 잘못하고 있는지 모르겠지만, 아무도 도와 줄 수 없나요?

감사

Answer 1

TL; $(this).attr("data-number") 또는 $(this).data("number")

와 박사 사용 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); 
});