Как открывать в slick текущий слайд в модальном окне?

Question

[AltaiR]

Привет всем. Стоит задача открывать текущий слайд при клике в модальном окне. У slick текущий слайд имеет класс .slick-current. Для модальных окон подключил Magnific Popup. Вот код:

jQuery(document).ready(function(){
  jQuery('.slick-current .image-link').magnificPopup({
    type: 'image',
    mainClass: 'mfp-with-zoom', 
    zoom: {
      enabled: true, 
      duration: 300, 
      easing: 'ease-in-out',
      opener: function(openerElement) {
        return openerElement.is('img') ? openerElement : openerElement.find('img');
      }
    }
  });
});

И да, он открывает текущий слайд в модальном окне. Но при переключении слайда, новый слайд уже не открывается. Можно как то в реальном времени отслеживать добавление класса .slick-current к новым слайдам и их открывать в модальном окне?

Comments

[Сергей Мурзин]

"Стоит задача открывать текущий слайд при клике в модальном окне."
При клике где?

[Novamoscow]

Сергей Мурзин: очевидно, что при клике по слайду

[Сергей Мурзин]

Novamoscow: Бывают разные ситуации, но, вроде бы, разобрались в комментариях под ответом Никиты.

Answer 1

[Никита]

Используйте событие на листание слайдов, и обновляйте содержимое модалки

События слика:

// On swipe event
$('.your-element').on('swipe', function(event, slick, direction){
  console.log(direction);
  // left
});

// On edge hit
$('.your-element').on('edge', function(event, slick, direction){
  console.log('edge was hit')
});

// On before slide change
$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

Добавляете вызов magnificPopup на стандартный эвент смены слайда.

Comments

[AltaiR]

js не знаю, поэтому и спросил тут

[Сергей Мурзин]

AltaiR:
Как то так:

jQuery(document).on("click", ".slick-current .image-link", function(){
  $(this).magnificPopup({
    type: 'image',
    mainClass: 'mfp-with-zoom', 
    zoom: {
      enabled: true, 
      duration: 300, 
      easing: 'ease-in-out',
      opener: function(openerElement) {
        return openerElement.is('img') ? openerElement : openerElement.find('img');
      }
    }
  });
});

[AltaiR]

Сергей Мурзин: почему то не работает этот код

[Сергей Мурзин]

AltaiR: https://jsfiddle.net/m2syL6dc/

[Сергей Мурзин]

AltaiR: Твой изначальный вариант был правильный, только не надо было привязываться к активному слайду.
PS: Читайте внимательно документацию.

Answer 2

[iBird Rose]

тебе нужно просто открыть картинку при клике на эту же картину? а не легче ли поставть тот же fancyapps.com/fancybox/3 который просто через data атрибут для ссылки работает?
https://jsfiddle.net/4j9km2mw/

Comments

[AltaiR]

мне нужно открывать картинку только активного слайда

[iBird Rose]

AltaiR: ну в моем примере ты и не сможешь открыть не активный слайд

[AltaiR]

использовал код отсюда https://jsfiddle.net/9dyh2yjt/1/ и вот что у меня сейчас: tdfzm.ru/#reviews

[AltaiR]

iBird Rose: ну меня три слайда для показа и один центральный (активный)