flexslider - 壮观的弹出窗口与滑块同步

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

        }
    }
});

最佳答案

绝对有可能。这是使用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