我正在使用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
。
您的努力将非常适用。
答案 0 :(得分:2)
我找到了它,我将此作为答案添加,以便其他人也可以从中受益。
你只需要添加回调。
我在magnificPopup({})
函数之后添加了以下代码。这将解决图像将自动开始移动的问题。
callbacks: {
open: {
setInterval(function() {
$.magnificPopup.instance.next();
}, 2000);
}
}