Random slider (keeping the order of the images)

Design help General
1

Hello!

I would like to know how to make a slider start on a different image each time the page loads but always keeping the same order of the images.
I found this JS but it’s not exactly what I want (it randomizes all the images and what I want is to keep the order of the images but start with a different one each time):

I would really appreciate your help, thank you very much!!!

2

Hi, are you currently using this code?

<script>
  $(".mask").append($(".mask").children().sort(function () {
    return Math.random() - 0.5;
}));
</script>

You can try to use this modified code to randomize the first slide and keep the subsequent slides in order. This uses a slice method to repeat the first randomize slide if your slider continues to rotate through more than once. This is some AI generated code so I don’t “really” know what I’m doing haha.

 <script>
    // Get the slide elements
    var $slides = $(".mask").children();

    // Randomize the first slide
    var $firstSlide = $slides.first();
    var $remainingSlides = $slides.slice(1);

    // Append the first slide
    $(".mask").append($firstSlide);

    // Append the remaining slides in their intended order
    $remainingSlides.each(function (index, element) {
      $(".mask").append(element);
    });

    // If the slider repeats, append the first slide again
    $(".mask").append($firstSlide.clone());
  </script>
3

thank you very much for your help!

I entered the lines of code you indicated but they did not work.
I will keep trying, thank you very much anyway!