Javascript image slideshow iteration - why is the last image first

I am trying to create a small slideshow. The slideshow consists of six images each with their own caption. There is also one static general caption.

The code below works but it shows the last image first, then skips the first image and iterates through the rest. After the first round everything is in order, so why is this happening please?

CSS

.imwrap {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    font-family: Roboto;
}

.imgsx {
    position: absolute;
    transition: opacity 1.5s ease-in;
    max-width: 99%;
    border-radius: 13px;
}

.text {
    color: white;
    font-weight: bolder;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    margin-top: 65%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    transition: opacity 1.5s ease-in;
    width: fit-content;
    z-index: 2000;
    opacity: 0;
    display: block;
    text-align: center;
}

.numbertext {
    color: blue;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    background-color: rgba(255, 255, 255, 0.6);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: 100;
}

.imgsx+.imgsx {
    opacity: 0;
}

HTML

<div class="imwrap">
  <div class="numbertext">with kind permission from picturesofengland.com</div>  
  <img class="imgsx" src="./trip/railway.webp" alt="Railway">
  <div class="text">Swanage preserved railway - by Jack Rickard &copy;</div>
  <img class="imgsx" src="./trip/boats.webp" alt="Boats">
  <div class="text">Swanage - by Jenny Fairbrother &copy;</div>
  <img class="imgsx" src="./trip/night.webp" alt="Night time">
  <div class="text">Night time on the beach - by Stephen Williams &copy;</div>
  
  <img class="imgsx" src="./trip/training.webp" alt="Training ship">
  <div class="text">Training in Swanage Harbour &copy;</div>
  <img class="imgsx" src="./trip/buffet.webp" alt="Buffet car">
  <div class="text">Buffet Car, Swanage Station - Jenny Fairbrother &copy;</div>
  <img class="imgsx" src="./trip/sunny.webp" alt="Sunny evening">
  <div class="text" style="opacity:1">A Sunny evening in Swanage - by Jill Giles &copy;</div>
</div> 

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 
<script>
var current = 0,
  slides = document.getElementsByClassName("imgsx");
  caps = document.getElementsByClassName("text");
setInterval(function() {
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.opacity = 0;
        caps[i].style.opacity = 0;
    }
    current = (current != slides.length - 1) ? current + 1 : 0;
    slides[current].style.opacity = 1;
    caps[current].style.opacity = 1;
}, 5000);
</script>

Edit

Codepen example https://codepen.io/dcsimp/pen/yLvvdwb