How To Randomize Slides In WordPress Using Elementor

Elementor offers many creative options to play with to make your website look much better to visitors. Sliders and Carousels are a few methods that WordPress users have incorporated to make their websites look more advanced.

Sliders are made of a sequence of Slides, and when they appear on your website, it occurs to be the same sequence over and over again. This tutorial will understand how to randomize slides in WordPress using Elementor.

How To Randomize Slides in Elementor Slider

To begin with, add an HTML block where you will be pasting the below-given code.

Here's the code you need to paste into your previously created HTML block.

<script>
(function(){
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>

If you have more than one slider on your website, keep reading. Aside from that, everything should be good.

How To Randomize Slides For One or More Sliders

Change this line in the code and give it the class name FirstSlider.

document.querySelector('.elementor-slides');
// change it to
document.querySelector('.slider1 .elementor-slides');

Copy the code and change the class names if you want additional Elementor Sliders on the page to be random and then give them separate class names.

Then copy and paste the code into an HTML element immediately after each of the slider components you wish to randomize.

Finally, change the class name to match the slider directly above the corresponding HTML element in the same line of code.

This line, for example, might be used for the third slider on your website.

document.querySelector('.slider3 .elementor-slides');

That's it. If everything goes well, you can go ahead and enjoy your randomized Elementor Slider. Make sure to join us on our Facebook and Twitter to never miss out on our tutorials.