Buttons to pass the slide does not work - Javascript

Asked

Viewed 24 times

0

Guys, the buttons to pass the slide does not work, someone can help me?

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>

javascript slide

1 answer

1

Your problem there is that you’re using the method addEventListener() wrongly, as their function plusDivs(n) receives a parameter you are inserting () within addeventlistener to pass this parameter, but as can be seen in documentation this is not allowed for common functions, to solve this, just insert a callback function into the System with its function inside:

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>

Browser other questions tagged javascript slide

You are not signed in. Login or sign up in order to post.