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

时间:2018-04-20 21:58:21

标签: javascript random slider slick

我正在使用

      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>

除了插入空白幻灯片(或白色间隙)外,一切都很好。只是无法摆脱它。任何线索或线索?

1 个答案:

答案 0 :(得分:3)

您根本不需要操纵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