Juntar 2 funções em uma só.

[Lunnie 0]

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:

 

                <div class="slider">

                    <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.