Image rotation on 3 second timer

1

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;

}
2

Hi kvar,

welcome to the freeCodeCamp forum. I assume you have tried this code somewhere. What did you expect that did not happen? It would be great if you could create a codepen/jsfiddle/… that recreates your issue.

3