Отображение модального окна со slick slider
 

Доброго времени суток. Возникла такая проблема. Имеется ротатор товаров, который сделан с использованием slick slider. После нажатия на товар, появляется модальное окно с этим ротатором.

Проблема в том, что при первом появлении модального окна расположение элементов в слайдере не правильно, элементы выстраиваются вертикально, и соответственно все едет. Но при изменении размера окна браузера, или при переключении ротатора, все встает на место

Демо пример: http://test11.alekseev.pw/catalog_modal.html

(чтобы воспроизвести ошибку необходимо кликнуть на любой товар из каталога)

Так же прикладываю архив с файлами

Drm1804,
скрывать модальное окно надо только после того как прошла инициализация слайдера
$('.modal').show();
$('.main_modal_slider').slick({
dots: true,
infinite: true,
speed: 1000,
slide: '.main_modal_slide_item',
slidesToShow: 1,
slidesToScroll: 1,
touchMove: false,
adaptiveHeight: true
});
$('.modal').hide()

Drm1804,
вариант попроще

function modalWindow(){
    var modal = document.getElementsByClassName('modal'); //Находим модальное окно

    if (modal[0].style.display == 'block'){
        modal[0].style.display = 'none';

    }else{
        modal[0].style.display = 'block';
    *!*  $(window).resize() */!*
    }
}

Спасибо огромное