Как в slick слайдере исправить баг?

Question

[Ghena_29]

Добрый день,нужна помощь.

на сайте есть много айтемов,при клике на любой,всплывает popup со слайдером и листаються картинки,каждого айтема (для каждого айтема есть отдельная папка с картинками).
Подключил magnific popup + slick слайдер. Вроде все хорошо,но есть но:
когда открываю любой айтем первый рас,все нормально,потом открываю как-то другой и картинка смещена к правой сторое (походу сам слайдер теряет свой размер),но при первом же листании картинок,картинки выравниваются и у слайдера опять появляется высода и ширина.

можете пожалуйста подсказать,как такую проблему исправить ?
P.S где то вычитал,что нужно делать refresh для слайдера перед открытием...
Заранее спасибо!

Answer 1

[alvvi]

P.S где то вычитал,что нужно делать refresh для слайдера перед открытием...

Правильно вычитали, только не перед а после.

sliderElement.slick.setPosition() 
//или 
$('.slider').slick('setPosition')

Comments

[Ghena_29]

$('.modal-link').magnificPopup({
    callbacks: {
      open: function() {
        $('.name').slick('setPosition')
      }
    }
});

что-то слайдер вообще не работает )
или я не правильно поставил?

[alvvi]

Ghena_29, глянтье в коносль в первую очередь.

$('.name') - это точно блок на котором .slick() вызван ранее для инициализации слайдера?

Если в консоле пусто, проверить можно так $('.name')[0].slick должно содержать объект, если undefined - слайдер не проиницилизрован или инициализирован не на этом элементе.

[alvvi]

Ghena_29, + убедитесь что callback вообще вызывается, сделайте console.log оттуда. Не особо знаком с API magnificPopup просто.

[Ghena_29]

Илья Ростопка,

$('.modal-link').magnificPopup({
    callbacks: {
      open: function() {
        $('.catalog-slider').slick('setPosition') // Так не работает
        // $('.catalog-slider').slick();  // так все работает
      }
    }
);

[alvvi]

Ghena_29, все верно, потому что $('.catalog-slider').slick('setPosition') это команда для УЖЕ инциализированного слайдера, которая позволяет пересчитать ему все величины и подстроится под контейнер. Насколько я понимаю у вас при открытии поп-апа слайдер еще не инциализирован, поэтому нет смысла вызвать там .slick('setPosition'). Вам нужно одно из двух:
1) Инциализировать/Разрушать слайдер при каждом открытии/закрытии. Первое делается так как вы это показали $(element).slick(), второе с помощью slick('unslick').
2) Иницализировать один раз при открытии, при следующих открытиях вызвать setPosition. Как проверить инциализирован ли слайдер думаю догадаетесь.

Если слайдер после инциализации все равно выглядит плохо, во-первых проверьте действует ли вообще на него .slick('setPosition') вызвом через консоль при уже открытом поп-апе. Если действует, попробуйте сразу после инициалиазции с небольшой задержкой вызвать с помощью setTimeout, иногда помогает. Если нет, проблема скорее всего где-то в разметке.

[Ghena_29]

Илья Ростопка, инициализировал слайдер до открытия popUp, после открытияpopUp указал ему $('.slick).slick('setPosition');

и все заработало как нужно)
спасибо большое за помощь!

Answer 2

[errrix]

Попробуйте использовать не Вашу сввязку( magnific popup + slick ) а fancybox. Это попап с галереей и больше подходит под Вашу задачу