Question

我正在使用

      var allslides = document.querySelector(".lazy");
        for (var i = allslides.children.length; i >= 0; i--) {
          allslides.appendChild(allslides.children[Math.random() * i | 0]);
        };

在Slick carousal（图像滑块）中随机化幻灯片顺序。

这里“.lazy”是：

<section class="lazy slider" data-sizes="50vw">
  <div><img src="1.png"/</div>
  <div><img src="2.png"/</div>
  <div><img src="3.png"/</div>
  <div><img src="4.png"/</div>
</section>

除了插入空白幻灯片（或白色间隙）外，一切都很好。只是无法摆脱它。任何线索或线索？

Answer 1

您根本不需要操纵DOM。只需挂钩goto方法，然后随机导航到另一张幻灯片。

这是许多可能的实现之一：

var total = $('.slick-slideshow img').length, // get the number of slides
    rand = Math.floor( Math.random() * total ); // random number

$('.slick-slideshow').slick({
    autoplay: true,
    autoplaySpeed: 7000,
    arrows: false,
    fade: true,
    slide: "img",
    pauseOnHover: false
})
.slickGoTo(rand); //navigate to random slide

您可以在此讨论中了解更多信息：https://github.com/kenwheeler/slick/issues/359

滑动图像滑块中的随机滑动顺序

1 个答案: