First slides not showing when using multiple javascript carousels

I am having some trouble figuring out why my first slides aren't showing while having multiple carousels running. I have little knowledge on coding and kind of stitched/modified some I've found, mostly from w3schools. There won't be any interaction for the page, just need it displayed.

jsfiddle demo

Will have to lower the page magnification to see the whole 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;
}

@font-face {
  font-family: regional;
  src: url("Files/Fonts/regional-blackexpanded.otf?") format("opentype");
}

@font-face {
  font-family: destra;
  src: url("Files/Fonts/Destra-Medium.otf?") format("opentype");
}

font {
  font-size: 32px;
  text-transform: uppercase;
}

.image {
  height: 1080px;
  width: 1920px;
}

.one {
  font-family: 'regional';
  font-size: 48px;
  color: white;
  text-transform: uppercase;
  height: 45px
}

.two {
  display: flex;
  align-items: center;
  font-family: 'destra';
  font-size: 26px;
  padding: 0px 20px 0px 20px;
  background-color: white;
  height: 30px
}

.three {
  font-family: 'regional';
  font-size: 75px;
  color: white;
  text-align: right;
  height: 45px
}

.firstSlides:not(:first-child),
.secondSlides:not(:first-child),
.firstInfo:not(:first-child),
.secondInfo:not(:first-child) {
  display: none;
}

.w3-animate-left {
  position: absolute;
  left: 0px;
  top: 0px;
  animation: animateleft 0.6s
}

@keyframes animateleft {
  from {
    left: -100px;
    opacity: 1;
    transform: scale(1.15)
  }
  to {
    left: 0;
    opacity: 1;
    transform: scale(1.0)
  }
}

.text-anim-left {
  z-index: 1;
  position: absolute;
  height: 120px;
  width: 600px;
  top: 850px;
  left: 200px;
  border-width: 0px;
  border-style: solid;
  border-color: black;
  animation: animleft 1s
}

@keyframes animleft {
  from {
    left: 0px;
    opacity: 0
  }
  to {
    left: 200px;
    opacity: 1
  }
}

.w3-animate-right {
  position: absolute;
  left: 0px;
  top: 0px;
  animation: animateright 0.6s
}

@keyframes animateright {
  from {
    right: -100px;
    opacity: 1;
    transform: scale(1.15)
  }
  to {
    right: 0;
    opacity: 1;
    transform: scale(1.0)
  }
}

.text-anim-right {
  z-index: 1;
  position: absolute;
  height: 120px;
  width: 600px;
  top: 850px;
  left: 1140px;
  border-width: 0px;
  border-style: solid;
  border-color: black;
  animation: animright 1s
}

@keyframes animright {
  from {
    left: 1340px;
    opacity: 0
  }
  to {
    left: 1140px;
    opacity: 1
  }
}

<body>
  <div class="firstInfo text-anim-left">
    <div class="one">Imane</div>
    <div class="two">by dorkartist</div>
    <div class="three">
      <font>Aug</font>'21</div>
  </div>
  <div class="firstSlides w3-animate-left"><img class="image" src="https://i.postimg.cc/sgYxWg2q/21-08-Imane.png"></div>

  <div class="firstInfo text-anim-left">
    <div class="one">Imane</div>
    <div class="two">by dorkartist</div>
    <div class="three">
      <font>Feb</font>'22</div>
  </div>

  <div class="firstSlides w3-animate-left"><img class="image" src="https://i.postimg.cc/SQXmbxc8/22-03-Full-Metal.png"></div>
  <div class="secondInfo text-anim-right">
    <div class="one">Cool Cat</div>
    <div class="two">by CarpeDM</div>
    <div class="three">
      <font>Aug</font>'21</div>
  </div>
  <div class="secondSlides w3-animate-right"><img class="image" src="https://i.postimg.cc/3NCTfdDD/22-03-Full-Metal-Flipped.png"></div>

  <div class="secondInfo text-anim-right">
    <div class="one">Imane</div>
    <div class="two">by Succuren</div>
    <div class="three">
      <font>Oct</font>'19</div>
  </div>

  <div class="secondSlides w3-animate-right"><img class="image" src="https://i.postimg.cc/269jFqhj/21-08-Imane-Flipped.png"></div>
</body>

Imagine it has something to do with the not(:first-child) lines on the css page but when I remove them, all the images stack.

Solution

You have 2 intervals that run your functions:

var myInterval = setInterval(carousel, 4500);
var yourInterval = setInterval(slideshow, 3000);

But you never call the function on load meaning the js is waiting however many seconds before running your code

Add these two lines before your intervals:

carousel()
slideshow()

So your js code should look like this:

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];
carousel()
slideshow()
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";
  }
}