Hello, I’m trying to get a banner to rotate on a three second timer. I’m using this start up code below, can anyone help me with the rest?
setInterval(() => {
currentImgIndex += 1
image.style.backgroundImage = array[currentImageIndex]
}, 3000)
HTML -
<div class="banner" id="main-banner">
<div id="buttons">
<button class="one prev"><</button>
<button class="two next">></button>
</div>
</div>
CSS -
.banner {
box-sizing: border-box;
display: flex;
margin: 0 auto;
height: 50vh;
width: 100%;
justify-content: space-between;
align-items: center;
background: url("images/banner_pic.jpg") no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#mainImage {
width: 100%;
max-height: 100%;
}
#buttons {
box-sizing: border-box;
display: flex;
width: 100%;
justify-content: space-between;
align-content: center;
}
.one {
background-color: transparent;
border: solid 3px #4F7DA6;
padding: 5px 15px 5px 15px;
margin-left: 100px;
border-radius: 50%;
color: #4F7DA6;
font-family: sans-serif;
font-size: 2em;
font-weight: 800;
}
.one:focus {
outline: none;
}
.two {
background-color: transparent;
border: solid 3px #4F7DA6;
padding: 5px 15px 5px 15px;
margin-right: 100px;
border-radius: 50%;
color: #4F7DA6;
font-family: sans-serif;
font-size: 2em;
font-weight: 800;
}
.two:focus {
outline: none;
}