title: Random slide order in slick image slider
body: <p>I am using</p>
  
  <pre><code>      var allslides = document.querySelector(".lazy");
          for (var i = allslides.children.length; i &gt;= 0; i--) {
            allslides.appendChild(allslides.children[Math.random() * i | 0]);
          };
  </code></pre>
  
  <p>to randomize the slide order in Slick carousal (image slider). </p>
  
  <p>Here ".lazy" is:</p>
  
  <pre><code>&lt;section class="lazy slider" data-sizes="50vw"&gt;
    &lt;div&gt;&lt;img src="1.png"/&lt;/div&gt;
    &lt;div&gt;&lt;img src="2.png"/&lt;/div&gt;
    &lt;div&gt;&lt;img src="3.png"/&lt;/div&gt;
    &lt;div&gt;&lt;img src="4.png"/&lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>All is fine except a blank slide (or a white gap) gets inserted. Just can't get rid of it. Any clues or cues?</p>