Question

我正在为我的网站使用bx滑块。我想知道如果内容在浏览下一张幻灯片时出现问题，该如何避免空白。它是否可以显示或循环回到第一张幻灯片。供参考，我在下面附有截图如您所见，右侧没有空白，因为没有更多的幻灯片。我如何在那里显示第一张第二张幻灯片，以便循环播放。

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的一些不为人知的事实尚不清楚，也没有记载。

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

有关bxSlider选项的更多信息，请访问 this link

演示

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

<!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中移过，则循环播放到第一张幻灯片

1 个答案:

演示