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> (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>
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!
41 Responses
Absolutely brilliant. Exactly what I needed. Thank you.
Works instantly, thanks a lot!!
Welcome!
Is it possible to use this same code for the Elementor testimonial slider?
I have tried without success
Benjamin Fielden yes it's possible, with this code :
<script>
(function(){
let parent = document.querySelector('.elementor-widget-testimonial-carousel .swiper-wrapper');
let images = parent.children;
let frag = document.createDocumentFragment();
while (images.length) {
frag.appendChild(images[Math.floor(Math.random() * images.length)]);
}
parent.appendChild(frag);
}());
</script>
Thanks really helpful.
Can you please guide me, how to show only 6 random testimonials out of 20? Your script is showing all testimonials randomly.
Yes, just replace "elementor-slides" with "testimonial-slider" on the second line.
I tried but dosn't works with two slider in the same page. Any advice? I used also the class
Should work just fine.. HTML elements needs to be positioning right after each sliders.
Thanks for this - worked a treat. Weird that this is not a standard option within the Elementor widget!
Welcome!
Hi It work well 🙂
(Important note: HTML elements needs to be positioning right after each sliders)
Is this also possible on a backgrund-slideshow on a Column ?
If yes ... How ?
Thanks from Copenhagen
Lars
Hey Lars! Yea it should work there as well... Just need the right selector!
Hi Maxime. I can’t seem to get it to work on background slider… help?
Hi Maxime, I would love to be able to do this with the background slideshow on sections. But I can't get it to work no matter what selector I use.
Hey Nick! Try this code :
<script>
(function(){
let parent = document.querySelector('.elementor-background-slideshow .swiper-wrapper');
let images = parent.children;
let frag = document.createDocumentFragment();
while (images.length) {
frag.appendChild(images[Math.floor(Math.random() * images.length)]);
}
parent.appendChild(frag);
}());
</script>
I can't get it to work on the background slideshow as well. I tried the code you provided but it's not working. Any help would be greatly appreciated!
Hi! Having the same issue (wanting random background slideshow) and can't get it to work. Anybody solved this in the meantime?
It works, it's perfect!
Is there a way to do the same with the Animated Headline?
Thanks in advance!
Maybe... share me your page where you have this animated headline, I will check the markup and see if it could work
Maxime Desrosiers Hi Maxime, thanks for your answer, here's an example page where I would like to use the random code on the Animated Headline: https://endofdays.it/random-headline/
My goal is to show the list of words in the "headline rotating words" randomly,
Thanks in advance!
Luca Mantovani This seems to work just fine:
I tried this but just got a 500 server error.
I pasted the above code in an html widget right under my slider.
I did not use the "multiple sliders on the page" info because there is only one.
When I click "update" in elementor I just get a little popup that says "500 Server Error."
Is this solution outdated maybe?
Or am I not understanding something?
That kind of server error is unrelated to what I show in this tutorial... Maybe your host has very low resources? Or maybe you aren't an admin user, and you can't add JavaScript to pages?
This is almost what I was looking for... maybe it can still work I hope!
How could I get this result random slides when using section background slider?
Hello, as a beginner I have to ask you for help. Problem description:
My goal is to connect 2 things that were pointed out to me in the Elementor FB group:
Add individual URLs to an image-slider:
https://element.how/elementor-image-carousel-links/
Since the images are advertising banners for a small social site (the following link is test space only), I want the images/banners to appear in random order:
https://element.how/elementor-slider-random/
It works fine, 6 images, 6 URLs.
Only unfortunately, due to the random sorting, the image and URL do not match.
Can this be combined somehow?
It would be really great if you or someone else could help me!
https://schatzkarten.wbgbuwevg23.linevast-hosting.com/test/
Best regards
Boris
Hey Boris! Yes this would be possible, however it would pretty much need to be coded fresh. If you are interested in custom work, you can write me at maxime@element.how , or by Messenger (see footer).
Wow! thank you so much! works very well 🔥
Hi,
I've got this code running on my site, but there seems to be a problem when I try to have 2 different sliders loading as popups. I have one setup for desktop and one for mobile and tablet. The mobile one randoms no problem but the desktop version does not.
Here have a look https://frontkick.online/
Hey Kenko!
That's because there is a conflict in the JS... the same variables are used. I fixed the code to prevent this. Update yours and it should work!
Thank you!! <3
Will this also work with the "Reviews" widget?
And is it possible to set a maximum number to present?
For example select random 3 from a list of 20.
Thank you
Yes it will work for that. Just need to adjust the selector to target the right element.
A bit further coding would be required to make it show only 3 from 20 though...
Thanks for your reply Maxime.
Could you please offer any guidance with regards to the further coding required? Is this something you can help with? Or point me in the direction of a relevant resource to read?
Thanks in advance
Hey David!
I went ahead and coded this. Consider sending a donation here : https://paypal.me/elementhow/ if you would like! No obligations.
Same instructions as above. Cheers!
Hey Maxime. Big props for helping so many folks out here!
I've been trying to get the snippet from this comment (https://element.how/elementor-slider-random/#comment-12854) to work on my own section background slider, and I'm having no luck. Am I putting it in the right place (tried am HTML widget in a new section after the slider section as well as an HTML widget right inside the slider section)?
Only have one section with a background slider on this page, but I also tried with/without a custom CSS class...
Any other suggestions for how to get this working? Thanks again 🙂
I can't get it to work on the background slideshow as well. Have you had any luck yet?
Hi,
I have same problem. how can I have random background slider in every time that page load?
Hi! Having the same issue (wanting random background slideshow) and can't get it to work. Anybody solved this in the meantime?
Did anyone manage to make this work with a section background slider?
//Lars, Copenhagen