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>`
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);
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>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)