Magnific Popup 可以包含滑块吗？答案

【问题标题】：Can Magnific Popup contain a slider?Magnific Popup 可以包含滑块吗？
【发布时间】：2013-06-12 23:23:51
【问题描述】：

我正在创建一个包含多个图片库的网站。这些图像本质上是一个封面——当点击时，我想使用 Magnific Popup 打开一个灯箱，其中仅包含该项目中的图像幻灯片（不是从画廊项目 1 到画廊项目 2 等...）我已经使用 Swiper 插件设置了幻灯片，并希望在弹出窗口中打开它。我知道您可以在弹出窗口中打开 html 内容，但是包含整个幻灯片的 div 呢？这似乎合乎逻辑，但我无法让它发挥作用。

【问题讨论】：

检查dimsemenov.com/plugins/royal-slider/slider-in-lightbox

标签： jquery magnific-popup swiper

【解决方案1】：

我只需要在 Magnific Popup 中使用 Flexslider 即可。为了让它工作，我需要在 Magnific 回调中初始化 Flexslider。

$('.ajaxpop').magnificPopup({
    type: 'ajax',
    callbacks: {
        parseAjax: function(mfpResponse) {
            mfpResponse.data = $(mfpResponse.data).find('#slider-container');
        },
        ajaxContentAdded: function() {
            $('.flexslider').flexslider({
                  animation: "slide"
             }); 

         }

    }
});

对于您使用的任何滑块，这将是一个类似的过程。

【讨论】：

【解决方案2】：

  $('.open-popup-link').magnificPopup({
    type: 'ajax',
    callbacks: {
     parseAjax: function(mfpResponse) {
     mfpResponse.data = $(mfpResponse.data).find('#sliderContainer');
    },
    ajaxContentAdded: function() {
       $("#owl-demo").owlCarousel({

      navigation : true,
      nav : true, // Show next and prev buttons
      slideSpeed : 600,
      paginationSpeed : 700,
      singleItem:true,


      // "singleItem:true" is a shortcut for:
       items : 1, 
      // itemsDesktop : false,
      // itemsDesktopSmall : false,
      // itemsTablet: false,
      // itemsMobile : false

  });

     }

}

});

【讨论】：

这个神奇的弹出窗口中猫头鹰旋转木马的 sn-p 灵感来自灯箱中的滑块。

【解决方案3】：

如果您不介意更改库，我建议为此使用 Slick-lightbox。

https://github.com/mreq/slick-lightbox/

它与 Slick 一起使用：

https://github.com/kenwheeler/slick/

【讨论】：