光滑图像滑块中的随机幻灯片顺序

Question

我在用

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

随机分配Slick轮播中的幻灯片顺序（图像滑块）。

这里的“ .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