Слайдер и display:none
 

Здравствуйте! Помогите решить проблему. Есть слайдер который отображается только при нажатии на определенный div. Так как плагин не особо дружит с display:none было не мало проблем. В целом слайдер работает, но главной проблемой стало не отображение самих слайдов (изображений). Заметил, что если нажать на поле слайда, то через несколько секунд слайды появляются и все работает. Частично решил проблему через автоплей, но иногда все же не срабатывает. Приложу скрины для наглядности. Заранее благодарен!

P.S. На просторах инета нашел решение с помощью вот такой строчки $(".slider").slick('reinit');
Но мне не помогло, хотя возможно не туда вставлял )

Вот html слайдера

<article class="product_slider_1">
				<img src="images/product_slider_1/slide_1.png" alt="Картинка слайдера 1" class="slide_img_product">
				<img src="images/product_slider_1/slide_2.png" alt="Картинка слайдера 2" class="slide_img_product">
				<img src="images/product_slider_1/slide_3.png" alt="Картинка слайдера 3" class="slide_img_product">
				<img src="images/product_slider_1/slide_4.png" alt="Картинка слайдера 4" class="slide_img_product">
				<img src="images/product_slider_1/slide_5.png" alt="Картинка слайдера 5" class="slide_img_product">
				<img src="images/product_slider_1/slide_6.png" alt="Картинка слайдера 6" class="slide_img_product">
				<img src="images/product_slider_1/slide_7.png" alt="Картинка слайдера 7" class="slide_img_product">
				<img src="images/product_slider_1/slide_8.png" alt="Картинка слайдера 8" class="slide_img_product">
				<img src="images/product_slider_1/slide_9.png" alt="Картинка слайдера 9" class="slide_img_product">
				<img src="images/product_slider_1/slide_10.png" alt="Картинка слайдера 10" class="slide_img_product">
				<img src="images/product_slider_1/slide_11.png" alt="Картинка слайдера 11" class="slide_img_product">
				<img src="images/product_slider_1/slide_12.png" alt="Картинка слайдера 12" class="slide_img_product">
			</article>

и js

$('.product_slider_1').slick({
    autoplay: true,
    autoplaySpeed: 200,
    speed: 1500,
    slidesToShow: 4
});

Noonf,
$('определенный div').show();
$('.product_slider_1').slick(...);
$('определенный div').hide();

Хм, я если вставляю эти строки, то у меня все слайдеры слетают )

Noonf,
где код?

Сори, не понял вопроса. Где его расположение или скинуть сюда ? )

Noonf,
скинуть сюда то, что вы написали по предложенному решению.

Noonf,
или структуру скрытого блока

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

$('.product_1').show();
$('.product_slider_1').slick({
autoplay: true,
autoplaySpeed: 200,
speed: 1500,
slidesToShow: 4
});
$('.product_1').hide();

Noonf,

$(window).on("load", function() {
$('селектор_скрытого_блока').show();  // $('селектор_скрытого_блока').css('display', '');
$('.product_slider_1').slick({
    autoplay: true,
    autoplaySpeed: 200,
    speed: 1500,
    slidesToShow: 4
});
$('селектор_скрытого_блока').hide();  // $('селектор_скрытого_блока').css('display', 'none');
});

Noonf,
код функции кнопки открытия?