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{

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

const interval = setInterval(nextImg, 5000)


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

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

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



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

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

<link rel="stylesheet" href="style.css">
<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 class="button-container">
        <button id=" button-prev" class="btn">Previous</button>
        <button id="button-next" class="btn">Next</button>

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

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