Random slide order in slick image slider

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?