Preciso de ajuda com AUTOPLAY EM UM CARROSSEL | JavaScript

Boa tarde galera. Consegui fazer a navegação no carrossel, mas gostaria que também passasse as imagens de forma automática. Alguém consegue me ajudar? Valeu!!

HTML

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script scr="https://kit.fontawesome.com/ca14b9e588.js" crossorigin="anonymous"></script>
        <title>Slider com navegação</title>
        <link rel="stylesheet" href="./slide.css" />
    </head>
    <!-- https://www.youtube.com/watch?v=XHfOyhkdlgc -->
    <body>
        <div class="slide">
            <div class="slides">
                <div id="voltar" class="btn">
                    <i class="fas fa-chevron-left">&lt</i>
                </div>
                <div id="next" class="btn">
                    <i class="fas fa-chevron-right">&gt</i>
                </div>

                <div id="atual" class="image">
                    <img
                        src="https://images.unsplash.com/photo-1519773250401-ecb76e52506e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
                        alt="" />
                </div>

                <div class="image">
                    <img
                        src="https://images.unsplash.com/photo-1521106581851-da5b6457f674?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80"
                        alt="" />
                </div>

                <div class="image">
                    <img
                        src="https://images.unsplash.com/photo-1588033257885-e4b9b267d46d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1212&q=80"
                        alt="" />
                </div>

                <div class="image">
                    <img
                        src="https://images.unsplash.com/photo-1616548321627-3c1d17305545?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1168&q=80"
                        alt="" />
                </div>

                <div class="image">
                    <img
                        src="https://images.unsplash.com/photo-1560586738-6320184118ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80"
                        alt="" />
                </div>
            </div>
            <div class="balls"></div>
        </div>

        <script>
            var balls = document.querySelector(".balls");
            var quant = document.querySelectorAll(".slides .image");
            var atual = 0;
            var imagem = document.getElementById("atual");
            var next = document.getElementById("next");
            var voltar = document.getElementById("voltar");

            for (let i = 0; i < quant.length; i++) {
                var div = document.createElement("div");
                div.id = i;
                balls.appendChild(div);
            }
            document.getElementById("0").classList.add("imgAtual");

            var pos = document.querySelectorAll(".balls div");

            for (let i = 0; i < pos.length; i++) {
                pos[i].addEventListener("click", () => {
                    atual = pos[i].id;
                    slide();
                });
            }

            voltar.addEventListener("click", () => {
                atual--;
                slide();
            });
            next.addEventListener("click", () => {
                atual++;
                slide();
            });

            function slide() {
                if (atual >= quant.length) {
                    atual = 0;
                } else if (atual < 0) {
                    atual = quant.length - 1;
                }
                document.querySelector(".imgAtual").classList.remove("imgAtual");
                imagem.style.marginLeft = -1024 * atual + "px";
                document.getElementById(atual).classList.add("imgAtual");
            }
        </script>
    </body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(4, 21, 36);
}

.slide {
    width: 1024px;
    height: 576px;
    overflow: hidden;
    border-radius: 15px;
    transition: all 0.4s;
}

.slides {
    width: 5120px;
    display: flex;
}

.image img {
    width: 1024px;
    height: 576px;
}

#atual {
    transition: all 2s;
}

.btn {
    position: absolute;
    color: #fff;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s;
    font-size: 1.7em;
    margin-top: -5px;
}

.btn:hover {
    transform: scale(1.5);
}

#voltar {
    top: 50%;
    left: 10%;
}

#next {
    top: 50%;
    right: 10%;
}

.balls {
    position: absolute;
    width: 1024px;
    display: flex;
    justify-content: center;
    bottom: 30px;
}

.balls div {
    transition: all 0.5s;
    border: 1px solid #ffffff;
    padding: 6px;
    border-radius: 50%;
    margin-right: 15px;
    cursor: pointer;
}

.balls div:hover {
    background-color: #00ff80;
    border: 1px solid transparent;
}

.imgAtual {
    transition: all 0.5s;
    background-color: #00ff3c;
    border: 1px solid transparent;
}

Oi Carlos, tudo bem?

Para implementar a rotação automática de imagens no seu carrossel, você pode usar a função setInterval do JavaScript. Você pode fazer isso dessa forma:

// Aqui definimos a quantidade de tempo entre cada transição dos slides, você pode mudar para o tempo que desejar
const tempoTransicao = 5000;

// Função para avançar o slide
function avancarSlide() {
  atual++;
  slide();
}

// Para iniciar o intervalo de tempo para a transição de slides
let intervalo = setInterval(avancarSlide, tempoTransicao);

// Aqui paramos o intervalo de tempo quando o mouse passar sobre o carrossel
document.querySelector(".slide").addEventListener("mouseover", () => {
  clearInterval(intervalo);
});

// Continuar o intervalo de tempo quando o mouse sair do carrossel
document.querySelector(".slide").addEventListener("mouseout", () => {
  intervalo = setInterval(avancarSlide, tempoTransicao);
});

Com esse código iniciamos um intervalo de tempo que avança o slide automaticamente a cada 5 segundos (ou o valor que você desejar). Quando o mouse passa sobre o carrossel, o intervalo é interrompido usando a função clearInterval. Quando o mouse sai do carrossel, o intervalo é reiniciado.

Você pode ver como ficou aqui nesse exemplo no CodePen.

Espero que te ajude.

Um abraço e bons estudos.

Chegou a hora de transformar