只是想知道是否可以将Magnific弹出窗口与滑块(例如flexslider或光滑)同步,以便在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));
}
}
});
答案 0 :(得分:4)
这绝对有可能。这是使用Slick.js的一个例子。
INSERT INTO adestination
(id,
field1,
field2)
SELECT
null AS generated,
asource.field1,
asource.field2
FROM asource;
<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>
另外,请确保引入jQuery,Slick和Magnific Popup的依赖关系。
答案 1 :(得分:0)
如果您有多个.carousel实例,则可以这样做:
https://jsfiddle.net/9dyh2yjt/98/
$(function() {
$('.carousel').each(function() {
var gallery = $(this);
gallery
.slick()
.magnificPopup({
type: 'image',
delegate: 'a:not(.slick-cloned)',
gallery: {
enabled: true
},
callbacks: {
open: function() {
var current = gallery.slick('slickCurrentSlide');
console.log(current);
gallery.magnificPopup('goTo', current);
},
beforeClose: function() {
gallery.slick('slickGoTo', parseInt(this.index));
}
}
});
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<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>
<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>