JSFiddle - React, Tailwind, and code Playground

by Samuel DeVore

HTML

<div class="mask">
  <div class="Slide 1">1</div>
  <div class="Slide 2">2</div>
  <div class="Slide 3">3</div>
  <div class="Slide 4">4</div>
  <div class="Slide 5">5</div>
  <div class="Slide 6">6</div>
  <div class="Slide 7">7</div>
  <div class="Slide 8">8</div>
  <div class="Slide 9">9</div>
  <div class="Slide 10">10</div>
  <div class="Slide 11">11</div>
  <div class="Slide 12">12</div>
  <div class="Slide 13">13</div>
  <div class="Slide 14">14</div>
  <div class="Slide 15">15</div>
  <div class="Slide 16">16</div>
  <div class="Slide 17">17</div>
  <div class="Slide 18">18</div>
</div>

<p id="demo"></p>

<script>
  var children = $(".mask").children(); // get the divs in the .mask
  var j = Math.floor(Math.random() * 18); // get a random number from the length
  var front = children.splice(0, j); // splice off the front of the children
  children = $.merge(children, front);  // merge the children left and the front
  $(".mask").append(children); // put them in the mask element

</script>