I have encountered an issue with my carousels where the first slides are not displaying properly. I don't have much coding experience and have pieced together some code snippets from various sources, primarily w3schools. The page does not require any user interaction; it just needs to show the content.
You may need to zoom out to see the entire demo page.
CODE
var myIndex = 0;
var yrIndex = 0;
var i;
var u = document.getElementsByClassName("firstSlides");
var v = document.getElementsByClassName("secondSlides");
var w = document.getElementsByClassName("firstInfo");
var z = document.getElementsByClassName("secondInfo");
var allThumbs = [u, w];
var rightThumbs = [v, z];
var myInterval = setInterval(carousel, 4500);
var yourInterval = setInterval(slideshow, 3000);
function carousel() {
myIndex++;
for (i = 0; i < allThumbs.length; i++) {
allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none";
allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block";
}
}
function slideshow() {
yrIndex++;
for (i = 0; i < rightThumbs.length; i++) {
rightThumbs[i][(yrIndex - 1) % rightThumbs[i].length].style.display = "none";
rightThumbs[i][yrIndex % rightThumbs[i].length].style.display = "inline-block";
}
}body {
overflow: hidden;
margin: 0;
padding: 0;
background: black;
}
/* CSS styles continue... */