0

Galera, os botões para passar o slide não funciona, alguém pode me ajudar?

var slideIndex = 1;
showDivs(slideIndex);

var bE = document.querySelector("#botaoesquerda");
var bD = document.querySelector("#botaodireito");

function showDivs(n) {

  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

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

bE.addEventListener("click", plusDivs(-1));
bD.addEventListener("click", plusDivs(1));
.mySlides {
  display: none;
  width: 1000px;
  height: 500px;
}

.botao {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
}

#botaodireito {
  left: auto;
  right: 30px;
}

.slideshow {
  /* z-index: -1; */
  position: relative;
}
<!DOCTYPE html>
<html lang="en">

<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">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="slideshow">
    <img class="mySlides" src="image/1.jpg">
    <img class="mySlides" src="image/2.jpg">
    <img class="mySlides" src="image/3.jpg">

    <button id="botaoesquerda" class="botao" ">&#10094;</button>
        <button id="botaodireito " class="botao "">&#10095;</button>
  </div>
  <script src="script.js"></script>
</body>

</html>

1 Resposta 1

1

O seu problema aí é que está utilizando o método addEventListener() de forma errada, como a sua função plusDivs(n) recebe um parâmetro vc está inserindo () na mesma dentro do addEventListener para passar esse parâmetro, porém como pode ser visto na documentação isso não é permitido para funções comuns, para resolver isso, basta inserir uma função de callback no listener com a sua função dentro:

var slideIndex = 1;
showDivs(slideIndex);

var bE = document.querySelector("#botaoesquerda");
var bD = document.querySelector("#botaodireito");

function showDivs(n) {

  var x = document.getElementsByClassName("mySlides");

  if (n > x.length) {
    slideIndex = 1;
  }
  if (n < 1) {
    slideIndex = x.length;
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

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

bE.addEventListener('click', function() {
  plusDivs(-1)
});
bD.addEventListener('click', function() {
  plusDivs(1)
});
.mySlides {
  display: none;
  width: 1000px;
  height: 500px;
}

.botao {
  z-index: 2;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
}

#botaodireito {
  left: auto;
  right: 30px;
}

.slideshow {
  /* z-index: -1; */
  position: relative;
}
<div class="slideshow">
  <img class="mySlides" src="https://picsum.photos/200/300">
  <img class="mySlides" src="http://placekitten.com/200/300">
  <img class="mySlides" src="https://via.placeholder.com/600/92c952">

  <button id="botaoesquerda" class="botao">&#10094;</button>
  <button id="botaodireito" class="botao">&#10095;</button>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .