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.