与滑块

Question

只是想知道是否可以将Magnific弹出窗口与滑块（例如flexslider或光滑）同步，以便在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的一个例子。

Working Example

HTML

INSERT INTO adestination
(id,
 field1,
 field2) 
SELECT 
     null AS generated, 
     asource.field1, 
     asource.field2
FROM asource;

JS

<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>

依赖关系

另外，请确保引入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>