How to open in slick the current slide in a modal window?

Question

css

Hi all. The task is to open the current slide when clicking in the modal window. For slick, the current slide has the class .slick-current . For modal windows, I connected Magnific Popup . Here is the code:

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');
      }
    }
  });
});

And yes, it opens the current slide in a modal window. But when switching a slide, a new slide is no longer opened. Is it possible to somehow track the addition of the .slick-current class to new slides in real time and open them in a modal window?

Answer 1

Use the event to scroll through the slides, and update the content of the modal Slick
Events:

// 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);
});

Add a magnificPopup call to the standard slide change event.

Answer 2

you just need to open the picture when you click on the same picture? Isn't it easier to put the same fancyapps.com/fancybox/3 that just works through the data attribute for the link?
https://jsfiddle.net/4j9km2mw/