为什么灯箱在轮播中使用时无法正确计算图像数量？

Question

目标

我想将 Splide carousel 与灯箱一起使用。

问题

如果我在 Splide 轮播中使用灯箱，则灯箱无法正确计算图像数量。

例如，我在轮播中有 3 张图像，但灯箱显示 7 张图像。

然而，如果我在 Splide 轮播之外使用灯箱，它会按预期工作。

例如，我在轮播中有3张图片，灯箱显示3张图片。

我尝试过的事情

我尝试过以下三个灯箱：

在 Splide 轮播中使用时，它们三个都错误地计算了图像数量！ 而且，如果我在轮播中有 3 个图像，则它们三个都显示 7 个图像。这对我来说似乎不是巧合。我已经尝试解决这个问题几个小时但没有成功。

可重现的示例

我使用 Fancybox 重现了该问题。

注意：单击任意图像即可打开灯箱（即 Fancybox）。

Splide 旋转木马内的 Fancybox <-- NOT WORKING (i.e., showing 7 images instead of 3)

document.addEventListener("DOMContentLoaded", function() {
  /* Splide */
  var splide1 = new Splide(".splide.splide-galerija", {
    type: "loop",
    perPage: 1,
    perMove: 1,
    arrows: false,
    pagination: true,
    lazyLoad: "nearby",
    padding: "60px",
    breakpoints: {
      1259: {
        gap: "21px",
      },
      1023: {
        perPage: 1,
        gap: "10px",
        padding: "20px",
      },
    },
  });

  splide1.mount();

  /* Fancybox */
  Fancybox.bind('[data-fancybox="gallery"]', {});
});

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- Splide -->
<link href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<!-- Fancybox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>

<div id="galerija-prenocisce" class="mx-auto">
  <div class="wrapper">
    <div class="row mx-auto px-xl-0 px-sm-3 px-2">
      <div class="col-12">
        <section class="splide splide-galerija mx-auto" aria-label="Splide Basic HTML Example">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" data-caption="Image 1">
                    <img class="w-100" src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" />
                  </a>
                </div>
              </li>
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" data-caption="Image 2">
                    <img class="w-100" src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" />
                  </a>
                </div>
              </li>
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
                    data-caption="Image 3">
                    <img class="w-100" src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
                    />
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

Splide 旋转木马外的 Fancybox <-- WORKING (i.e., showing 3 images)

document.addEventListener("DOMContentLoaded", function() {
  /* Fancybox */
  Fancybox.bind('[data-fancybox="gallery"]', {});
});

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- Fancybox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>

<a data-fancybox="gallery" data-src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" data-caption="Image 1">
  <img class="w-100" src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" />
</a>
<a data-fancybox="gallery" data-src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" data-caption="Image 2">
  <img class="w-100" src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" />
</a>
<a data-fancybox="gallery" data-src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
  data-caption="Image 3">
  <img class="w-100" src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
  />
</a>

编辑

两种可能的解决方案：

如果您不需要旋转木马的循环，请将其关闭。对于 Splide，这意味着将
```
type: "loop"
```
更改为
```
type: "slide"
```
。

document.addEventListener("DOMContentLoaded", function() {
  /* Splide */
  var splide1 = new Splide(".splide.splide-galerija", {
    type: "slide",
    perPage: 1,
    perMove: 1,
    arrows: false,
    pagination: true,
    lazyLoad: "nearby",
    padding: "60px",
    breakpoints: {
      1259: {
        gap: "21px",
      },
      1023: {
        perPage: 1,
        gap: "10px",
        padding: "20px",
      },
    },
  });

  splide1.mount();

  /* Fancybox */
  Fancybox.bind('[data-fancybox="gallery"]', {});
});

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- Splide -->
<link href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<!-- Fancybox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>

<div id="galerija-prenocisce" class="mx-auto">
  <div class="wrapper">
    <div class="row mx-auto px-xl-0 px-sm-3 px-2">
      <div class="col-12">
        <section class="splide splide-galerija mx-auto" aria-label="Splide Basic HTML Example">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" data-caption="Image 1">
                    <img class="w-100" src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" />
                  </a>
                </div>
              </li>
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" data-caption="Image 2">
                    <img class="w-100" src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" />
                  </a>
                </div>
              </li>
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
                    data-caption="Image 3">
                    <img class="w-100" src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
                    />
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

使用自定义选择器以避免在灯箱中包含克隆元素。

document.addEventListener("DOMContentLoaded", function() {
  /* Splide */
  var splide1 = new Splide(".splide.splide-galerija", {
    type: "loop",
    perPage: 1,
    perMove: 1,
    arrows: false,
    pagination: true,
    lazyLoad: "nearby",
    padding: "60px",
    breakpoints: {
      1259: {
        gap: "21px",
      },
      1023: {
        perPage: 1,
        gap: "10px",
        padding: "20px",
      },
    },
  });

  splide1.mount();

  /* Fancybox */
  Fancybox.bind('li:not(.splide__slide--clone) [data-fancybox="gallery"]', {});
});

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<!-- Splide -->
<link href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

<!-- Fancybox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.umd.js"></script>

<div id="galerija-prenocisce" class="mx-auto">
  <div class="wrapper">
    <div class="row mx-auto px-xl-0 px-sm-3 px-2">
      <div class="col-12">
        <section class="splide splide-galerija mx-auto" aria-label="Splide Basic HTML Example">
          <div class="splide__track">
            <ul class="splide__list">
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" data-caption="Image 1">
                    <img class="w-100" src="https://optimise2.assets-servd.host/maniacal-finch/production/animals/reticulated-giraffe-01-01.jpg?w=1200&auto=compress%2Cformat&fit=crop&dm=1658951271&s=179de228b20aafcd748a5f0dc8fde776" />
                  </a>
                </div>
              </li>
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" data-caption="Image 2">
                    <img class="w-100" src="https://images.ctfassets.net/81iqaqpfd8fy/3r4flvP8Z26WmkMwAEWEco/870554ed7577541c5f3bc04942a47b95/78745131.jpg?w=1200&h=1200&fm=jpg&fit=fill" />
                  </a>
                </div>
              </li>
              <li class="splide__slide">
                <div class="img-wrapper position-relative">
                  <a data-fancybox="gallery" data-src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
                    data-caption="Image 3">
                    <img class="w-100" src="https://th-thumbnailer.cdn-si-edu.com/axHGv_G1wmyLZG1cXVDcxsl-oVg=/1072x720/filters:no_upscale()/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/0c/5f/0c5fc6f8-1b9b-4510-8b15-163482a3e041/istock_6413768_medium.jpg"
                    />
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

Answer 1

将任何灯箱脚本与使用克隆元素进行无限导航的轮播相结合时，这是一个众所周知的问题。

有两种解决方案：

使用 Fancyapps UI 提供的 Fancybox 和 Carousel，因为它们的 carousel 使用智能元素定位来提供无限导航，无需元素克隆。事实上，您可以将 Fancybox 与 Carousel 结合起来，而无需编写任何额外的 JavaScript 代码，请参阅 https://fancyapps.com/carousel/#combine
如果您的 Lightbox 脚本支持自定义选择器，那么您必须使用它来避免包含克隆元素，例如
```
Fancybox.bind('a:not(.cloned))
```
<- this is just an example, you have to tweak this selector to your needs.

为什么灯箱在轮播中使用时无法正确计算图像数量？

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

目标

问题

我尝试过的事情

可重现的示例

1个回答

最新问题

为什么灯箱在轮播中使用时无法正确计算图像数量？

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

目标

问题

我尝试过的事情

可重现的示例

1个回答

最新问题

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