Let's learn how to easily randomize the order of the slides in the Elementor Slider element!
Let's also make this work if you have more than one Elementor slider element on your page!
First, add this code right after your Elementor Slider
Add this code in an HTML element, that is placed right after the Elementor slider element.
<script>
let parent = document.querySelector('.elementor-slides');
let images = parent.children;
let frag = document.createDocumentFragment();
while (images.length) {
frag.appendChild(images[Math.floor(Math.random() * images.length)]);
}
parent.appendChild(frag);
</script>
Keep reading only if you have more than one slider on your page. Otherwise, this should already work just fine!
If you have more than one Elementor slider element on your page, give it a class name.
Give it a class name of 'slider1' , then change this line in the code:
document.querySelector('.elementor-slides');
to this
document.querySelector('.slider1 .elementor-slides');
If you want other Elementor Sliders on the page to also be random, duplicate the code, and adjust the class names.
Give them the class names 'slider2', 'slider3', etc.
Then, duplicate the code, and add it in an html element that is right after each of the slider elements that you want randomized.
Finally, simply adjust the same line of code, with the class name that matches the slider that is right above the respective HTML element.
For example, you would have this line for the third slider on your page.
document.querySelector('.slider3 .elementor-slides');
Finally, enjoy your random Elementor Slider!
Let me know if everything works for you!
