与滑块同步的大弹出窗口答案

【问题标题】：Magnific pop-up synchronized with slider与滑块同步的大弹出窗口
【发布时间】：2016-01-15 12:00:07
【问题描述】：

只是想知道是否可以将 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));

        }
    }
});

【问题讨论】：

标签： flexslider magnific-popup slick.js

【解决方案1】：

这绝对是可能的。这是一个使用 Slick.js 的示例。

Working Example

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

【讨论】：

非常感谢！对我来说 index - 1 似乎不能作为光滑的滑块工作，然后转到我在 magnificPopup 上的幻灯片之前的一张幻灯片。所以，如果我删除 - 1 并且只有自己的索引，它会在退出 magnificPopup 时转到正确的滑块，但有时它会卡在 2 张幻灯片之间而不是转到正确的幻灯片。我已经在上面编辑了我的问题，所以你可以看到我的代码。
啊，你是对的。我已经更新了我的答案，因此 Magnific Popup 排除了 Slick 创建的克隆项目。当使用键盘控件打开 Magnific Popup 时，它还会设置正确的图像。
酷！是否可以在 magnificPopup 的同时更改光滑的滑块？因此，当我退出 magnificPopup 时，光滑的滑块已经向我显示了我退出时在 magnificPopup 上的图像。
Magnific Popup 有一个 change 事件，您可以添加类似于 beforeClose 的事件。
非常感谢！我还有一个关于 Magnific Popup 的问题。让我知道我是否应该为此提出一个单独的问题。我正在研究一个 WordPress 主题，我想知道是否有一种方法可以在 Magnific Popup 中打开由编辑器插入到帖子正文中的图像。因此，我通过 TinyMCE 编辑器在帖子中插入的任何图像都会在单击前端时在 Magnific Popup 上打开。

【解决方案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>

【讨论】：