如果所有现有幻灯片都在 BX Slider 中结束，则循环到第一张幻灯片

Question

我正在为我的网站使用 bx 滑块。我想知道如果内容在滑过下一张幻灯片时结束，如何避免出现空白 space。是否可以显示或循环回到第一张幻灯片。作为参考，我附上了下面的截图如您所见，右侧有白色 space，因为没有更多幻灯片。我怎样才能在那里显示第一秒的幻灯片，以便循环播放。

function loadgallery() {
        setTimeout(function () {
            var maxSlides;
            width = $(window).width();

            if (width < 1023) {
                maxSlides = 1;

            } else {
                maxSlides = 4;
            }
            var myslider = $('.bxslider').bxSlider({
                video: true,
                minSlides: 1,
                auto: false,
                maxSlides: maxSlides,
            });
        }, 500);
    }

Answer 1

有一些关于 bxSlider 的难以理解的事实，这些事实并不明显 and/or 记录。

有一些关键设置适用于水平轮播（mode:"horizontal"（默认））：
- slideWidth: Number是必需的
- 如果infiniteLoop: true（默认），强烈建议幻灯片总数为偶数。
- maxSlides: Number 值应平均分配到幻灯片总数。
- minSlides: Number 值应与 moveSlides: Number
如果 bxSlider 是运行多张幻灯片，并且在调整大小失败后保持幻灯片晚间居中，请使用 shrinkItems: true。在加载和调整大小时，bxSlider 将重新计算幻灯片尺寸并确定在视口宽度内一次可以显示的最佳幻灯片数量。

有关 bxSlider 选项的更多信息，请转到 this link

演示

在全屏（或此 SO 代码段的整页）中测试此演示。调整 window 的大小以测试它的响应能力以及它如何适应多张幻灯片。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>100% Fluid Width bxSlider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" />
  <style>
    li {
      border: 3px solid black;
      margin: 0 auto;
      transform: translateY(-15px)
    }
  </style>
</head>

<body>
  <ul class="bx">
    <li>
    <img src="http://placehold.it/320x180/000/fff?text=1"></li>
    <li>
    <img src="http://placehold.it/320x180/76a/0ff?text=2"></li>
    <li>
    <img src="http://placehold.it/320x180/af2/000?text=3"></li>
    <li>
    <img src="http://placehold.it/320x180/d00/fff?text=4"></li>
    <li>
    <img src="http://placehold.it/320x180/fc0/980?text=5"></li>
    <li>
    <img src="http://placehold.it/320x180/27c/930?text=6"></li>
    <li>
    <img src="http://placehold.it/320x180/f0e/000?text=7"></li>
    <li>
    <img src="http://placehold.it/320x180/0b0/fff?text=8"></li>
    <li>
    <img src="http://placehold.it/320x180/8dd/fff?text=9"></li>
    <li>
    <img src="http://placehold.it/320x180/ad5/fff?text=10"></li>
    <li>
    <img src="http://placehold.it/320x180/975/fff?text=11"></li>
    <li>
    <img src="http://placehold.it/320x180/888/6fa?text=12"></li>
  </ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<script>
  var bx = $(".bx").bxSlider({
    minSlides: 1, //Value should match moveSlides value
    moveSlides: 1, //Value should match minSlides value
    maxSlides: 4, //Make total slides a numerator of this number
    slideWidth: 320, //Required for horizontal carousel
    slideMargin: 5,
    shrinkItems: true // Recalculates and adjusts when resized
  });
  </script>
</body>

</html>

如果所有现有幻灯片都在 BX Slider 中结束，则循环到第一张幻灯片

Loop to first slide if all existing slide gets over in BX Slider

javascript

jquery

bxslider

演示