[jQuery] slick - display:none> display:block 로 변경시 틀어지는 오류

slick은 jQuery 기반 라이브러리이다.

여기를클릭하면 slick 다운로드 홈페이지다.

오른쪽상단 get it now를 눌러 다운해서 사용.

 

이번 화면단에 slick slider를 사용하게 되었다.

상황에 맞게 창을 보여주고 , 숨기고 해야하기때문에

첫 로드시 div태그 css속성이 display:none 였다가, display:block으로 변경시

slick slider가 잘 나오지않고 아래로 떨어지는 현상이 나타났다.

$("#myList").off("click").on("click",function(){
    $('.userList').css('display', 'block');
    $('.slider').slick('setPosition');
});

그럴때는

$('.slider').slick('setPosition'); 로

위치를 바로잡아주면 끝.

.slider 는 본인이 지정한 클래스명으로 지정.

 

slick은 시작될때 해당 slick class에 'slick-initialized' 가 자동으로 붙는다.

상황에 따라 저 'slick-initialized' 클래스로 조건을 주어 응용 가능.

hasClass(), removeClass()

 

예)

if($('.slider').hasClass('slick-initialized')){
    //구현
}