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 >
  <div >with kind permission from picturesofengland.com</div>  
  <img  src="./trip/railway.webp" alt="Railway">
  <div >Swanage preserved railway - by Jack Rickard &copy;</div>
  <img  src="./trip/boats.webp" alt="Boats">
  <div >Swanage - by Jenny Fairbrother &copy;</div>
  <img  src="./trip/night.webp" alt="Night time">
  <div >Night time on the beach - by Stephen Williams &copy;</div>
  
  <img  src="./trip/training.webp" alt="Training ship">
  <div >Training in Swanage Harbour &copy;</div>
  <img  src="./trip/buffet.webp" alt="Buffet car">
  <div >Buffet Car, Swanage Station - Jenny Fairbrother &copy;</div>
  <img  src="./trip/sunny.webp" alt="Sunny evening">
  <div  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

CodePudding user response：

follow the option of @Yaver Javid, you can use css animation

but I found the reason why you start with the last image

It places all the image with opacity: 1, and position: abusolute to place them on the same postion of outer element, like put paper on table, the last one will show and others will hide by it.

the solution is at the beginning setting all the image with opacity: 0, but cause you use setTimeout function, the first picture will appear in 5 seconds when page on load, you can set the first picture and text with opacity: 1

my edit is here

CodePudding user response：

Use css animations.

Make a div, then using css animations to change its background image every 5000ms. And you can do the same for text. It will be much faster.