modal（モーダル）の中にslickスライダーを入れよう

ありそうであまり遭遇してなかったんですが、モーダル表示した中にスライダーを入れる実装がありました。
簡単に考えてたら、スライダーの中身が縦にソソり立って、デザインが豪快に崩れました。泣

いろいろ調べた結果「slick(‘setPosition’)」をソースコードに突っ込むことで解決しました。

JSデス

    $(function(){

        $('.modal_open').each(function(){      // モーダルを開く要素のclass
            $(this).on('click',function(){
                var target = $(this).data('target');      // どのモーダルを開くか指定する
                var modal = document.getElementById(target);      // 上で指定されたモーダル
                $(modal).fadeIn();
                $('.modal-slide').slick('setPosition');      // slickのclassでsetPosition！
                return false;
            });
        });
        $('.modal_close').on('click',function(){      // モーダルを閉じる要素のclass
            $('.modal').fadeOut();    // モーダルの要素を閉じる
            return false;
        }); 

    });

htmlです

<a href="" class="modal_open" data-target="modal-1">モーダルを開く</a>

<!-- modal_slide1 -->
<div class="modal" id="modal-1">

    <div class="modal-bg modal_close"></div>  <!-- モーダルの背景です -->

    <div class="modal-content">
        <div class="modal-x modal_close">閉じる</div>
        <div class="modal-slide">
            <div class="modal-slide-item">スライド1-1</div>
            <div class="modal-slide-item">スライド1-2</div>
            <div class="modal-slide-item">スライド1-3</div>
        </div>
    </div>

</div>
<!-- // modal_slide1 -->


<a href="" class="modal_open" data-target="modal-2">2つ目のモーダルを開く</a>

<!-- modal_slide2 -->
<div class="modal" id="modal-2">

    <div class="modal-bg modal_close"></div>  <!-- モーダルの背景です -->

    <div class="modal-content">
        <div class="modal-x modal_close">閉じる</div>
        <div class="modal-slide">
            <div class="modal-slide-item">スライド2-1</div>
            <div class="modal-slide-item">スライド2-2</div>
            <div class="modal-slide-item">スライド2-3</div>
        </div>
    </div>

</div>
<!-- // modal_slide2 -->

詳しくは触れていませんが、複数モーダルを実装するときの「data-target=”xxx”」にも注目いただければ幸いです