Javascript carousel

const imgs = document.getElementById(‘imgs’)
const btnPrev = document.getElementById(‘button-prev’)
const btnNext = document.getElementById(‘button-next’)

const imgList = document.querySelectorAll(‘#imgs img’)
let index = 0

function nextImg(){

if(index = imgList.length-1){
index = 0
} else{
index++;
}

imgList.forEach(image =>{
image.style.transform = translateX(${-index * 500}px

})
}
const interval = setInterval(nextImg, 5000)

nextImg()

*{
box-sizing: border-box;
}
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
margin: 0;
background-color: #f2f2f2;
}

.carousel{
box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
height: 530px;
width: 500px;

}
.image-container{
display: flex;
justify-content: center;
transform: translateX(0);
transition: transform .5s ease-in-out;
}
img{
width: 500px;
height: 500px;
object-fit: cover;

}

.button-container{

display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0;

}
.btn{
background-color:rgb(124, 30, 124);
color: white;
border: none;
padding: .5rem;
width: 49.5%;
transition: opacity .2s;
}
.btn:hover{
opacity: .7;
}
.btn:focus{
outline: none;
}

<link rel="stylesheet" href="style.css">
<title>Document</title>
<div class="carousel">
    <div class="image-container" id="imgs">
        <img src="/images/image-1.jpg" height="500px" width="500px"  alt="">
        <img src="/images/image-2.jpg" height="500px" width="500px"  alt="">
        <img src="/images/image-3.jpg" height="500px" width="500px"  alt="">
        <img src="/images/image-4.jpg" height="500px" width="500px"  alt="">
        <img src="/images/image-5.jpg" height="500px" width="500px"  alt="">
    </div>
    <div class="button-container">
        <button id=" button-prev" class="btn">Previous</button>
        <button id="button-next" class="btn">Next</button>
    </div>
</div>

<script src="script.js"></script>

anyone know how to write the logic for a basic carousel?