magnific popup autoplay slideshow

时间:2015-07-08 05:52:33

标签: popup magnific-popup autoplay

我正在使用popific 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

您的努力将非常适用。

1 个答案:

答案 0 :(得分:2)

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

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