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

Question

我正在使用

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

以随机化光滑轮播(图像滑块(中的幻灯片顺序。

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