Как решить проблему с повторной иннициализацией slick.js?

Question

[Mark]

У slick.js очень странное поведение. При открытие popup'а нормальный вид:

Нормальный вид

Такой вид будет при первом открытии popup'а. Если открывать другие, следующая ситуация:

Проблема

То есть, не грузятся изображения, но отображаются стрелки слайдера. Если на них нажимать фото постепенно раскрывается:

Постепенное раскрытие

Полагаю, проблема в инициализации. Кто-то сталкивался с таким, как можно решить проблему?

Comments

[YoloV]

Chrome dev tools, можно ссылочку попросить на сайт?

[ProjectSoft]

При открытии - инициализируйте slick, при закрытии - разрушайте его.
Знать бы какой slick вы используете....
Например для kenwheeler.github.io/slick
Есть метод unslick который разрушит слайдер
$('.slider').slick('unslick');

[Mark]

YoloV, сайт: http://татуед.рф/
ProjectSoft, 1.8.0.

Насколько понял, инициализация идет в js/main.js с 60 по 66 строчку.

P.S. Проект передал старый клиент, ему делал верстку напарник, который сейчас в отпуске за границей, у меня другое направление, поэтому приходится на своих знаниях выезжать(+еще промежуточный исполнитель как-то криво делал, чего стоит 14 одинаковых форм) и терроризировать тостер вопросами, так что прошу прощения, если решение будет очевидным.

[ProjectSoft]

Mark, iBird Rose вам дал верное решение. Именно его вызывайте при открытии popup

[Mark]

ProjectSoft, да, но там есть "нюанс" - отписал в комментариях к ответу, сейчас стараюсь решить.

Answer 1

[iBird Rose]

При повторном вызове вызывай метод setPosition
$('.slider').slick('setPosition');

Comments

[Mark]

Спасибо, это помогло, но с нюансом что на 2-ой вызов изображения занимают "нормальную" позицию. Я сделал скриншоты градации(запускал через консоль):

Работа

- 1-ый запуск $('.slider').slick('setPosition');
- 2-ой запуск $('.slider').slick('setPosition');

[ProjectSoft]

Mark, попробуйте одно из двух

// Инициализация всех слайдеров
$('.slider').slick({
	dots: false,
	infinite: false,
	speed: 300,
	slidesToShow: 1,
	adaptiveHeight: true
});
$('.serviceItem__button, .serviceItem__more').magnificPopup({
	type:'inline',
	midClick: true,
	callbacks: {
		open: function(){
			// вызыв метода пересчёта
			$('.slider').slick('setPosition');
			// Если не поможет первое
			/*
			setTimeout(function(){
				$('.slider').slick('setPosition');
			}, 50);
			*/
		}
	}
});

[magaloss]

$('.slider').slick('setPosition', 0);
или
$('.slider').slick('resize');

Answer 2

[Роман Матвеев]

у меня вот такой метод сработал
мне нужно было встроить слайд или блок где нет еще слайдов после загрузки страницы и при добавлении чтоб перезапускался слайдер
вот эти способы не помогали
$('.slider').slick('init');
$('.slider').slick('reinit');
$('.slider').slick('setPosition');

помогло когда заново у слайдера перегружаешь параметры его, но перед этим удлаешь всю инизиализацию методом - unslick

$('body').on('click', '.btnAdd', function (event) {
        event.preventDefault();
        $('.Slider').slick('unslick');
        $('.Slider').slick(SlickSlider());
    });

    function SlickSlider() {
        return {
            infinite: true,
            slidesToShow: 1,
            slidesToScroll: 1
        };
    }

или вот так

slickCarousel();

function slickCarousel() {
    $('.skills_section').slick('unslick');
    $('.skills_section').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1
    });
}