我有一些问题添加滑块lightbox到滑块，它没有打开弹出窗口。在remove itemSelector img之后，它打开弹出窗口，但是src未定义。有什么提示吗？
JS：
$('.works-slideshow').slick({
arrows: false,
dots: false,
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
$('.works-slideshow').slickLightbox({
src: 'src',
itemSelector: '.team-image img'
});
HTML
<div class="row">
<div class="works-slideshow text-center">
<div class="owl-item">
<div class="col-sm-12 mb-sm-20 wow bounceIn">
<div class="team-item">
<div class="team-image"><img src="assets/images/ss1.png" alt="Member Photo"/>
</div>
<div class="team-descr font-alt">
<div class="team-name">text</div>
</div>
</div>
</div>
</div>
似乎您使用了错误的选择器为您的主要滑块/灯箱功能。我在下面添加了一个工作示例。
null
$('.works-slideshow .team-item').each(function() {
var slider = $(this);
slider.slick({
arrows: false,
dots: false,
accessibility: false,
infinite: true,
autoplay: true,
autoplaySpeed: 5000,
slidesToShow: 3,
slidesToScroll: 1,
responsive: [{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var sLightbox = $(this);
sLightbox.slickLightbox({
src: 'src',
itemSelector: '.team-image img'
});
});img {
width: 95%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js"></script>
<div class="row">
<div class="works-slideshow text-center">
<div class="owl-item">
<div class="col-sm-12 mb-sm-20 wow bounceIn">
<div class="team-item">
<div class="team-image">
<img src="https://via.placeholder.com/350x150" alt="Member Photo" />
</div>
<div class="team-image">
<img src="https://via.placeholder.com/350x150" alt="Member Photo" />
</div>
<div class="team-image">
<img src="https://via.placeholder.com/350x150" alt="Member Photo" />
</div>
<div class="team-image">
<img src="https://via.placeholder.com/350x150" alt="Member Photo" />
</div>
<div class="team-image">
<img src="https://via.placeholder.com/350x150" alt="Member Photo" />
</div>
<div class="team-image">
<img src="https://via.placeholder.com/350x150" alt="Member Photo" />
</div>
</div>
<div class="team-descr font-alt">
<div class="team-name">text</div>
</div>
</div>
</div>
</div>
</div>