Великолепное всплывающее окно синхронизировано с ползунком

Question

Просто интересно, можно ли синхронизировать всплывающее окно Magnific с помощью ползунка (например, flexslider или slick), чтобы при смене слайда на всплывающем окне Magnific изменялся и ползунок на заднем плане.

РЕДАКТИРОВАТЬ

$('.slick-slider').magnificPopup({
    delegate: '.slides:not(.slick-cloned) a',
    type: 'image',
    mainClass: 'mfp-fade',
    fixedContentPos: false,
    removalDelay: 350,
    pauseOnHover: false,
    gallery:{
        enabled: true,
        tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
    },
    callbacks: {
        beforeClose: function() {
            $('.slick-slider').slick('slickGoTo', parseInt(this.index - 1));

           // works better with the code bellow but sometimes gets stuck between 2 slides 
           $('.slick-slider').slick('slickGoTo', parseInt(this.index));

        }
    }
});

Answer 1

Это определенно возможно. Вот пример использования Slick.js.

Рабочий пример

HTML

<div class="carousel">
    <a href="//satyr.io/1280x720/1"><img src="//satyr.io/600x400/1" width="600" height="400" alt="" /></a>
    <a href="//satyr.io/1280x720/2"><img src="//satyr.io/600x400/2" width="600" height="400" alt="" /></a>
    <a href="//satyr.io/1280x720/3"><img src="//satyr.io/600x400/3" width="600" height="400" alt="" /></a>
    <a href="//satyr.io/1280x720/4"><img src="//satyr.io/600x400/4" width="600" height="400" alt="" /></a>
    <a href="//satyr.io/1280x720/5"><img src="//satyr.io/600x400/5" width="600" height="400" alt="" /></a>
</div>

JS

$(document).ready(function() {

    var $carousel = $('.carousel');

    $carousel
        .slick()
        .magnificPopup({
            type: 'image',
            delegate: 'a:not(.slick-cloned)',
            gallery: {
                enabled: true
            },
            callbacks: {
                open: function() {
                    var current = $carousel.slick('slickCurrentSlide');
                    $carousel.magnificPopup('goTo', current);
                },
                beforeClose: function() {
                    $carousel.slick('slickGoTo', parseInt(this.index));
                }
            }
        });
});

зависимости

Также убедитесь, что вы включили зависимости для jQuery, Slick и Magnific Popup.

Обновить

• Аккаунты для клонированного предмета, созданного Slick
• Обновляет Magnific Popup с текущим слайдом при открытии с помощью клавиатуры.

Answer 2

И если у вас есть несколько экземпляров.carousel, вы можете сделать это так:

https://jsfiddle.net/9dyh2yjt/98/

$(function() {
  
  $('.carousel').each(function() {
    var gallery = $(this);
    gallery
    .slick()
    .magnificPopup({
      type: 'image',
      delegate: 'a:not(.slick-cloned)',
      gallery: {
        enabled: true
      },
      callbacks: {
        open: function() {
          var current = gallery.slick('slickCurrentSlide');
          console.log(current);
          gallery.magnificPopup('goTo', current);
        },
        beforeClose: function() {
          gallery.slick('slickGoTo', parseInt(this.index));
        }
      }
    });
  });
  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>


<div class="carousel">
  <a href="//satyr.io/1280x720/1"><img src="//satyr.io/600x400/1" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/2"><img src="//satyr.io/600x400/2" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/3"><img src="//satyr.io/600x400/3" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/4"><img src="//satyr.io/600x400/4" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/5"><img src="//satyr.io/600x400/5" width="600" height="400" alt="" /></a>
</div>

<div class="carousel">
  <a href="//satyr.io/1280x720/1"><img src="//satyr.io/600x400/1" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/2"><img src="//satyr.io/600x400/2" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/3"><img src="//satyr.io/600x400/3" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/4"><img src="//satyr.io/600x400/4" width="600" height="400" alt="" /></a>
  <a href="//satyr.io/1280x720/5"><img src="//satyr.io/600x400/5" width="600" height="400" alt="" /></a>
</div>