Random slide order in slick image slider

Question

I am using

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

to randomize the slide order in Slick carousal (image slider).

Here ".lazy" is:

<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>

All is fine except a blank slide (or a white gap) gets inserted. Just can't get rid of it. Any clues or cues?

Take a look at the answer to this question: https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — J. Kamien, Apr 20 '18 at 22:03
Is this meant to answer my question? Could you please tell what I should be looking for? — Platform anthropocene Inc., Apr 20 '18 at 22:15

score 7 · Answer 1 · answered Apr 20 '18 at 22:15

7

You don't really need to manipulate the DOM at all. Simply hook into the goto method and randomly navigate to a different slide.

This is one of many possible implementations:

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

You can learn more in this discussion: https://github.com/kenwheeler/slick/issues/359

answered Apr 20 '18 at 22:15

Orlandster

4,706
2
30
45

2

I think you could also set `initialSlide: rand` in the initial options – Rick Davies Feb 11 '19 at 17:20
https://stackoverflow.com/questions/44197831/randomize-slick-slides-except-the-first-slide – estinamir Dec 09 '22 at 20:20

Random slide order in slick image slider

1 Answers1