On page refresh images load randomly

On page refresh images load randomly. Here images are loading in sequence. I'm trying to load images randomly on page refresh. And I don't want to change the HTML structure. Images are adding through the frontend I can't add in js. Can anyone suggest to me how to achieve.

$(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();

});

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

from On page refresh images load randomly