Как исправить отображение slick-slider в magnific-popup окне?

Question

[silencer-spirit]

Подскажите в чем может быть проблема связанная с отображением slick в попап окне.
Суть вопроса: есть слайдер на странице, при нажатии на любую картинку появляется popup внутри которого есть еще один слайдер, НО отображается 1 img вместо указанных slidesToShow: 3. Стоит мне подвигать чуть-чуть слайдер или ресайзить окно как сразу же они появляются и все становится нормально, но при обновлении страницы и повторном нажатии опять та же история. Как мне исправить данную проблему? Заранее спасибо.

Comments

[Алексей]

Люди добрые! Где я накалываюсь? Подскажите, ткните носом..
Решение описанное тут, как раз должно подходить для моего случая.. Но где то я ошибаюсь..

Ситуация ровно такая же. Slick-слайдер в POP-up окне, Работает! Но не сразу, нет Ре-Инициализации..
Вот живой скриншот:



Вот скрипт Инициализации Слайдера:

var $status = $('.count');
var $slickElement = $('.slider_all');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {

    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
});


$slickElement.slick({
	dots: false,
	arrows: true,
	appendArrows:'.wrap_arrows',
	prevArrow:'<span class="strelka_nazad_header"><i class="fa fa-angle-left"></span>',
	nextArrow:'<span class="strelka_vpered_header"><i class="fa fa-angle-right"></span>'
});

ЭТО СКРИПТ ОТКРЫТИЯ POP-UP ОКНА для SLICK-СЛАДЕРА

$(".popup").magnificPopup({type:"image"});
$(".popup_content").magnificPopup({
	type:"inline",
	midClick: true
});


$(".portfolio_item").each(function(i) {
	$(this).find("a").attr("href", "#work_" + i);

	$slickElement.slick('refresh'); - ТУТ Так ПРОБОВАЛ - РЕЗУЛЬТАТА НЕТ! //////////////////
	
	$(this).find(".popup_window_SLACK_portfolio").attr("id", "work_" + i);
	
	$('.slider_all').slick('refresh'); - ТУТ Так ПРОБОВАЛ - ОПЯТЬ РЕЗУЛЬТАТА НЕТ! /////////////
});

Подскажите пожалуйста, где же нужно выполнить РЕ-Инициализацию слайдера, что бы при загрузке страницы, 1-й слайд отобразился (Ре-Иннициализировался)?
P.S. В консоли ошибок нет..

Answer 1

[Дмитрий Локшин]

При клике на кнопку popup вызовите метод .slick('refresh') либо .slick('reInit')
А если уж совсем точно, то вот так:

var slick = $('.slider').slick({
      //Тут параметры	
   });

  //Теперь по клику на изображение magnific-popup реинициализируем слайдер
   $('.img').click(function() {
      slick.slick('refresh');
   });

Comments

[silencer-spirit]

Огромное спасибо.