[Tip] modal popup 띄울 때 slick slider가 움직이게 만들기

모달창을 띄우고 그 안에 slick 슬라이더가 돌아가게 만드는 페이지를 코딩 작업중에 있었는데

이상하게 모달을 띄우면 슬라이더에 있는 이미지가 한대 뭉쳐져선 움직이지 않더군요.

글머리 기호를 클릭하거나 prev,next 버튼을 누르면 그제야 slick 슬라이더가 제대로 구현됐는데... 

그렇다고 사용자한테 글머리 기호 클릭하라고 할 수는 없는 노릇이니 어떻게든 오류를 수정해야만 했습니다.

css 뜯어고치고 모달 플러그인을 갈아엎고 슬라이더를 갈아엎고 별 난리를 쳐도 

저 상태가 계속 유지되서 북치고 환장할 노릇이었죠. -_-;;

하다가 도저히 안되겠어서 나같은 삽질자(..)가 분명 어딘가에 있겠지 싶어 열심히 구글링으로 뒤져보았는데

다행히도 저랑 같은 문제를 가지고 있던 분이 올린 게시물을 찾을 수 있었습니다.

https://stackoverflow.com/questions/26271790/slick-js-and-multiple-twitter-bootstrap-modal-windows

쉽게 말해 resize 함수를 쓰라는 내용이었죠. 

resize() 함수는 창의 크기가 변할때 무언가 처리하고 싶을때 쓰는 함수인데, 

제가 원하는 건 모달이 열릴때 슬라이더가 제대로 구현되어 작동되는 것을 원하는 거였으니까 

모달 팝업 자바스크립트에 해당 구문을 넣어야겠다는 생각이 들었습니다. 

settings = {
    //Model Popup
    objModalPopupBtn: ".modalButton",
    objModalCloseBtn: ".overlay, .closeBtn",
    objModalDataAttr: "data-popup"
}  
  $(settings.objModalPopupBtn).bind("click", function () {
        if ($(this).attr(settings.objModalDataAttr)) {

            var strDataPopupName = $(this).attr(settings.objModalDataAttr);

            
            //Fade In Modal Pop Up
            $(".overlay, #" + strDataPopupName).fadeIn(170);
	    $('slick 플러그인 클래스명').resize();
        }
    });

    //On clicking the modal background
    $(settings.objModalCloseBtn).bind("click", function () {
        $(".modal").fadeOut(90);
    });

$('slick 플러그인 클래스명').resize();를 넣으니까 그제야 제대로 구현이 되더라구요. 

이 한줄을 위해서 얼마나 삽질을 했던가... 혹시라도 모달 팝업창에 slick 슬라이더 넣으셔야하는 분들은 참고하셔도 좋을 것 같습니다.

* 팝업 : https://codepen.io/tamak/pen/nquir?page=1&

* slick slider 플러그인 : http://kenwheeler.github.io/slick/