Before anyone asks, I have tried to ask similar questions on the Stack Overflow forums, but surprisingly they're not very helpful. I'm actually kind of disappointed.
I am currently working on a client's website, and part of my assignment is to recreate a slideshow that was originally written in Flash (gah). I rewrote it in HTML5 with a bit of help from a JavaScript template
<div class="w3-content w3-section" style="max-width:280px">
<img class="mySlides w3-animate-fading" src="./images/280-385/banner1.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="./images/280-385/banner2.jpg" style="width:100%">
//etc. etc. all the way down for several dozen photos
</div>
<script>
var myIndex = 0;
carousel();
function carousel()
{
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 9500);
}
</script>
This JS code works perfectly for showing the pictures in order, but now the client wants them randomized. They also like the fading transitions, so writing something brand-new is out of the question.
I'm clearly not doing very well. My initial attempt at randomizing is to give each photo an id with "pic[number]" e.g.
<img class="mySlides w3-animate-fading" src="./images/280-385/banner1.jpg" style="width:100%" id="pic1">
and then use a DOM Parser to force the URL to come through as a string
var parser = new DOMParser();
var doc = parser.parseFromString(html, 'text/html');
var x = doc.getElementsById("pic" + Math.floor(Math.random()));
but all this accomplishes (along with any use of math.random really) is that the slideshow now displays every picture at once.
The client specifically wants me to keep using w3-animate-fading, and most of the solutions to randomize photos I've seen online involve completely rewriting the code with JS+jQuery and losing access to the stylesheet.
If anyone could help me out, that would be fantastic :)
