宏伟的弹出式自动播放幻灯片答案

【问题标题】：magnific popup autoplay slideshow宏伟的弹出式自动播放幻灯片
【发布时间】：2015-07-08 05:52:33
【问题描述】：

我正在使用 magnific popup 弹出图像幻灯片。以下是我所做的。

$('.parent-container').magnificPopup({
    type:'image',
    delegate: 'a',
    gallery: {
// options for gallery
    enabled: true
},
    image: {
// options for image content type
    titleSrc: 'title'
}
});

这是我的 HTML 标记

<div class="parent-container">
<ul class="row carousel-inner" style="margin:0; padding:0; background:red;">
    <li class="active item gallery-photo" style="margin:0; padding:0; background:red;">
        <a href="images/gallery-1.jpg" title="Image Title Here"><img class="img-responsive" src="images/gallery-1.jpg"></a>
    </li>
    <li class="item">
        <a href="images/gallery-2.jpg" title="Image Title Here"><img class="img-responsive" src="images/gallery-2.jpg"></a>
    </li>
    <li class="item">
        <a href="images/gallery-3.jpg" title="Image Title Here"><img class="img-responsive" src="images/gallery-3.jpg"></a>
    </li>
</ul>
</div>

现在，一切正常，但我希望图像自动更改，就像我启动弹出窗口时将显示第一张图像，然后它应该自动更改。我无法在文档中对auto进行任何处理。

您的努力将得到极大的赞赏。

【问题讨论】：

标签： popup magnific-popup autoplay

【解决方案1】：

我找到了，我将其添加为答案，以便其他人也可以从中受益。您只需要添加回调。我在magnificPopup({}) 函数之后添加了以下代码。这将解决图像会自动开始移动的问题。

callbacks: {
open: {
   setInterval(function() {
        $.magnificPopup.instance.next();
   }, 2000);
}
}

【讨论】：