我正在结合使用slick slider和sachinchoolur lightGallery。
我正在运行多个滑块,我希望每个光廊都与其相对滑块相关。
这是目前工作的,但我的问题是,lightgallery正在得到光滑的滑块克隆。
通常我可以通过在slick中使用infinite: false;来解决这个问题,但在这种情况下,我真的需要我的滑块是infinite: true;。
我搞不懂这件事,有没有办法解决这个问题?
因此,只有可见的幻灯片,而不是克隆的幻灯片,才会渲染到光廊中。
这里有一个更容易调试的小提琴。https://jsfiddle.net/joshmoto/jmvg5c93/
// init slick slider
$('.slick').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true
});
// slick light gallery
$('.slick').lightGallery({
selector: '.lightgallery',
//selectWithin: '.slick-slide:not(.slick-cloned)'
});FIGURE {
margin: 0;
width: 300px !important;
display: block !important;
}
IMG {
width: 100%;
}
.slick {
width: 300px;
margin: 0 auto 60px !important;
}
PRE {
text-align: center;
margin: 15px 0;
}<pre>4 Space Photos - lightgallery shows 9</pre>
<div class="slick">
<figure>
<a href="https://i.imgur.com/q5Y5RCH.png" class="lightgallery">
<img src="https://i.imgur.com/q5Y5RCH.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/8HjXPXD.png" class="lightgallery">
<img src="https://i.imgur.com/8HjXPXD.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/vUDcfcy.png" class="lightgallery">
<img src="https://i.imgur.com/vUDcfcy.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/okTDHas.png" class="lightgallery">
<img src="https://i.imgur.com/okTDHas.png" alt="" />
</a>
</figure>
</div>
<pre>3 Sea Photos - lightgallery shows 7</pre>
<div class="slick">
<figure>
<a href="https://i.imgur.com/x7ZYW4i.png" class="lightgallery">
<img src="https://i.imgur.com/x7ZYW4i.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/EYTCssm.png" class="lightgallery">
<img src="https://i.imgur.com/EYTCssm.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/3sAFPmL.png" class="lightgallery">
<img src="https://i.imgur.com/3sAFPmL.png" alt="" />
</a>
</figure>
</div>
<pre>5 Land Photos - lightgallery shows 11</pre>
<div class="slick">
<figure>
<a href="https://i.imgur.com/IqLrd0o.png" class="lightgallery">
<img src="https://i.imgur.com/IqLrd0o.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/6JplNl6.png" class="lightgallery">
<img src="https://i.imgur.com/6JplNl6.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/6X5GKWJ.png" class="lightgallery">
<img src="https://i.imgur.com/6X5GKWJ.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/SefTwI1.png" class="lightgallery">
<img src="https://i.imgur.com/SefTwI1.png" alt="" />
</a>
</figure>
<figure>
<a href="https://i.imgur.com/qBmDrTU.png" class="lightgallery">
<img src="https://i.imgur.com/qBmDrTU.png" alt="" />
</a>
</figure>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/css/lightgallery.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.7.0/js/lightgallery-all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
发布于 2020-05-12 18:48:41
我刚想通了..。
// slick light gallery
$('.slick').lightGallery({
selector: '.slick-slide:not(.slick-cloned) .lightgallery',
});请参阅fiddle https://jsfiddle.net/joshmoto/u5mh3a8x/
https://stackoverflow.com/questions/61749270
复制相似问题