光明图库中滑块检测克隆的幻灯片

问题描述 投票:0回答:1

我使用的是 滑块 结合 萨钦-学府之光画廊.

我正在运行多个滑块,我想让每个lightgallery都与它的相对滑块相关。

目前的工作原理是这样的,但我遇到的问题是,lightgallery得到的滑块被克隆了。

通常情况下,我可以通过以下方法解决这个问题 infinite: false; 中的滑块,但在这种情况下,我真的需要我的滑块是 infinite: true;.

我不明白这个问题,有什么办法解决这个问题吗?

因此,只有可见的幻灯片,而不是克隆,渲染到lightgallery中。

这里有一个小技巧,方便调试。https:/jsfiddle.netjoshmotojmvg5c93。

// 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>
jquery slick.js lightgallery
1个回答
0
投票

我想明白了...

// slick light gallery
$('.slick').lightGallery({
  selector: '.slick-slide:not(.slick-cloned) .lightgallery',
});

参见 fiddle https:/jsfiddle.netjoshmotou5mh3a8x。

© www.soinside.com 2019 - 2024. All rights reserved.