JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="randomSlider">
  <ul class="fader">
    <li data-id="1"><img src="https://cdn.pixabay.com/photo/2021/10/03/04/21/woman-6676901_960_720.jpg"></li>
    <li data-id="2"><img src="https://cdn.pixabay.com/photo/2021/08/23/04/02/woman-6566600_960_720.jpg"></li>
    <li data-id="3"> <img src="https://cdn.pixabay.com/photo/2020/09/26/14/27/sparrow-5604220_960_720.jpg"></li>
  </ul>
</div>

JavaScript

$(function() {
 $.fn.shuffle = function() {
    var m = this.length,
      t, i;

    while (m) {
      i = Math.floor(Math.random() * m--);

      t = this[m];
      this[m] = this[i];
      this[i] = t;
    }

    return this;
  };

  $("li").shuffle().each(function(index, data) {
			$(".fader").html("");
      $(".fader").append(data)
  });
});


$(function() {
  $('.randomSlider ul.fader li').hide();
  $('.randomSlider ul.fader li').css('position', 'absolute');
  $('.randomSlider ul.fader li').css('top', '0px');
  $('.randomSlider ul.fader li').css('left', '0px');

  var max = $('.randomSlider ul.fader li').length;

  function showSlider() {

    if (localStorage.slider) {
      $('.randomSlider .fader').find('li:nth(' + localStorage.slider + ')').fadeIn();
      localStorage.slider = parseInt(localStorage.slider, 10) + 1;
      if (localStorage.slider >= max) localStorage.slider = 0;
    } else {
      $('.randomSlider .fader').find('li:nth(0)').fadeIn();
      localStorage.slider = 1;
    }
  }

  showSlider();
});