How can I create a timed slideshow with HTML/CSS and Javascript-CodePudding

I want to create a timed slideshow using my existing code and adding javascript to switch the image. I want three photos to alternate every 3 seconds. I only want the photo to change, not the text header. I've attached my HTML and CSS code.`

#headercontainer{
  width: 100vw;
  height:90vh;
  background-color: #A64253;
}


.head{
  width: 100%; 
  height: 100%; 
  object-fit: cover;
}

.headertxt{
  position: absolute; 
  top: 40%; 
  margin: auto;
  width: 100%; 
  font-size: 8.5vw;
  text-align: center;
  color: #17255A;
}

#arrow{
  font-size: 6vw;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    
  </head>
  <body>
 

  <div id="headercontainer">

  <img class="head" src="https://th.bing.com/th/id/R.10d3bd1edd810efb3ae8e0974e394445?rik=fIvZv9wkgyrIeQ&pid=ImgRaw&r=0" alt="">
  <h1 class="headertxt"> TEXT<br> <p id="arrow"> ↓</p></h1>
  </div>










    
  </body>
</html>

CodePudding user response：

setInterval() and setTimeout() are handy tools when making timers. In your case, you want the sequence to keep continuing, so setInterval() is the best option.

To make a sequence with setInterval(), you can do something like this:

setInterval(function(){ console.log("Hello"); }, 3000);

If you open your console, you will see "Hello" come up every few seconds.

So to use this awesome feature in your code, you can use this sample:

setInterval(function(){
  let images = ["path/to/first/image", "path/to/second/image", "path/to/third/image"];
  let imageNumber = 0;
  let image = images[imageNumber];
  document.querySelector(".head").src = image;
  imageNumber  ;
  if (imageNumber >= 3) {
     imageNumber = 0;
  }
}, 3000);

CodePudding user response：

Hope it could help you.

body {
    margin: 0;
}

#headercontainer {
    width: 100vw;
    height: 90vh;
    background-color: #A64253;
    position: relative;
}

.head {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headertxt {
    position: absolute;
    top: 40%;
    margin: auto;
    width: 100%;
    font-size: 8.5vw;
    text-align: center;
    color: #17255A;
    z-index: 1;
}

#arrow {
    font-size: 6vw;
}

.head1 {
    position: relative;
    animation: head1 9s linear infinite;
}

.head2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: head2 9s linear infinite;
}

.head3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: head3 9s linear infinite;
}

@keyframes head1 {
    0% {
        opacity: 1;
    }
    22.222222% {
        opacity: 1;
    }
    33.333333% {
        opacity: 0;
    }
    88.888888% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes head2 {
    0% {
        opacity: 0;
    }
    22.222222% {
        opacity: 0;
    }
    33.333333% {
        opacity: 1;
    }
    55.555555% {
        opacity: 1;
    }
    66.666666% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@keyframes head3 {
    0% {
        opacity: 0;
    }
    55.555555% {
        opacity: 0;
    }
    66.666666% {
        opacity: 1;
    }
    88.888888% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

<div id="headercontainer">
    <img class="head head1" src="https://www.w3schools.com/css/img_5terre.jpg" alt="">
    <img class="head head2" src="https://www.w3schools.com/css/img_forest.jpg" alt="">
    <img class="head head3" src="https://www.w3schools.com/css/img_lights.jpg" alt="">

    <h1 class="headertxt"> TEXT<br>
        <p id="arrow"> ↓</p>
    </h1>
</div>

CodePudding user response：

You can simply run a setInterval function with an array of images Just inject this JS code into your code to have your result

const headerImg = document.querySelector('.head')

const UPDATE_TIME_INTERVAL = 3000

//  Enter URLs of your own custom images
const imagesArray = [
  "https://unsplash.it/500",
  "https://unsplash.it/501",
  "https://unsplash.it/502",
]

let i = 0

setInterval(()=>{
  if(i == 2){
    i = 0
  }
  else {i = i   1};
  console.log('i was run',i)
  headerImg.src = imagesArray[i]
},UPDATE_TIME_INTERVAL)