Random slider (keeping the order of the images)


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

Hi, are you currently using this code?

  $(".mask").append($(".mask").children().sort(function () {
    return Math.random() - 0.5;

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.

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

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

    // If the slider repeats, append the first slide again

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!