Juntas 2 funções no javascript em um slider

Front-end
#1

Olá, boa tarde.

Tenho um slider automático e que também possui botões para passar para frente e para trás.

O slider também possui círculos em baixo para mostrar em qual “pagina” está.

O problema é que a minha função de deixar ele automático e a função de fazer os botões funcionarem são diferentes.

Quando o slide passa para o próximo automaticamente, o circulo continua no mesmo local, pois somente muda quando uso o botão de passar para o próximo.

Ja tentei utilizar o código do circulo nas duas funções, mas não deu certo pois uma diz que está em primeiro e a outra tenta muda-lo.

E também pela minha pouca experiencia, não consegui juntar as duas funções.

Peço a ajuda de vocês para que tanto automaticamente, como se clicar nas setas, o circulo mude o índice.

Segue abaixo meu código:

Html:
` 

                <img class="Slides fade" src="images/1.jpg">                    
                <img class="Slides fade" src="images/2.jpg">
                <img class="Slides fade" src="images/3.jpg">
                <img class="Slides fade" src="images/4.jpg">

                <span onclick="plusDivs(-1)">
                    <i class="fas fa-angle-left"></i>
                </span>
                <span onclick="plusDivs(+1)">
                    <i class="fas fa-angle-right"></i>
                </span>

                <div style="text-align:center">
                    <span class="dot far fa circle" onclick="currentSlide(1)"></span> 
                    <span class="dot far fa circle" onclick="currentSlide(2)"></span> 
                    <span class="dot far fa circle" onclick="currentSlide(3)"></span> 
                    <span class="dot far fa circle" onclick="currentSlide(4)"></span> 
                </div>
            </div>

`

script;

 <script type="text/javascript">

        var slideIndex = 1;
        showDivs(slideIndex);
        
        var slideIndexAuto = 0;
        showSlides();

        function plusDivs(number) {
            showDivs(slideIndex += number);
        }

        function currentSlide(n) {
            showDivs(slideIndex = n);
        }

       
        function showSlides() {
            var i;
            var slides = document.getElementsByClassName("Slides");

            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";

            }
            slideIndexAuto++;
            if (slideIndexAuto > slides.length) {
                slideIndexAuto = 1;
            }


            slides[slideIndexAuto - 1].style.display = "block";

            setTimeout(showSlides, 4000);

        }

        function showDivs(number) {
            var i;
            var slides = document.getElementsByClassName("Slides");
            var dots = document.getElementsByClassName("dot");
            if (number > slides.length) {
                slideIndex = 1;
            }
            if (number < 1) {
                slideIndex = slides.length;
            }

            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";

            }

            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";

        }
    </script>

css:

. slider{
width: 100%;
position: relative;
top: 72px;

}

.slider img{

width: 100%;
position: relative;

}
.fa-angle-left{
color: white;
position: absolute;
top: 45%;
left: 3%;
font-size: 35px;
cursor: pointer;
}

.fa-angle-right{
color: white;
position: absolute;
font-size: 35px;
top: 45%;
left: 96%;
cursor: pointer;

}

.dot{
cursor: pointer;
height: 15px;
width: 15px;
position: relative;
top: -22px;
background-color: #006666;
border: 1px solid white;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover{
background-color: #fff;
}

/Fade Slides/

.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Como sou iniciante em ambas linguagens, se tiver alguma coisa errada ou gambiarra por favor avisem para eu poder evoluir também.

Desde já agradeço.