Estoy tratando de hacer que mi control deslizante sea interactivo en una prueba en la que estoy trabajando y simplemente no puedo entenderlo. Tengo un código que utilicé de W3 pero estoy tratando de agregar un par de eventos para los botones, por lo que todo está en su propio archivo javascript en lugar de incrustado en el HTML.

Aquí está el HTML:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="./image_1.jpg" style="width:100%">
  <img class="mySlides" src="./image_2.jpg" style="width:100%">
  <img class="mySlides" src="./image_3.jpg" style="width:100%">

  <button id="clicker" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>

Aquí está el Javascript:

let leftSlideButton = document.getElementById("clicker");
let rightSlideButton = document.getElementById("clicker");

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  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";  
}

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

leftSlideButton.onclick = slideBack;
rightSlideButton.onclick = slideForward;

El control deslizante funcionó cuando el script estaba incrustado en el hmtl, pero cuando intenté escribir alguna funcionalidad para los botones en su propio archivo javascript simplemente deja de funcionar y ahora estoy bastante perplejo. Iv'e los agregó a su propia variable y agarró su selector html para que a su vez pueda agregar un controlador de eventos y vincularlo a la función, pero simplemente no funciona. Cualquier ayuda sería apreciada.

Además, esta es mi primera publicación, así que disculpen si no la he formateado correctamente.

TIA, Neil.

0
neilvix 28 sep. 2019 a las 01:53

3 respuestas

La mejor respuesta

Lo más probable es que el problema sea causado por 2 x id="clicker". El uso de identificadores únicos para los botones debería resolver el problema.

A continuación, dado que slideIndex se declaró globalmente, no requiere el middleware plusDivs.

También sugeriría usar funciones más claras y nombres de variables en aras de una mejor legibilidad. Verifique estos: slideDivs vs showDivs, step vs n, slides vs x, etc. Tal vez no suene como un gran trate el ejemplo dado, pero es un buen hábito y le ahorrará mucho tiempo cuando trabaje en proyectos más grandes.

También hay algunas optimizaciones menores posibles, como el cambio de visibilidad en un bucle y el almacenamiento en caché de diapositivas fuera de la función deslizante para evitar seleccionarla nuevamente con cada clic. Verifique el código recortado sugerido reescrito.

var visibleSlideIndex = 0;
var slides = document.getElementsByClassName("mySlides");

function slideDivs(step) {
    visibleSlideIndex = (visibleSlideIndex + step + slides.length) % slides.length;
    for (let index = 0; index < slides.length; index++) {
        slides[index].style.display = visibleSlideIndex === index ? "block" : "none";
    }
}

document.getElementById("slideLeftBtn").onclick = () => slideDivs(1);
document.getElementById("slideRightBtn").onclick = () => slideDivs(-1);
slideDivs(0);
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="main.js" defer></script>

<body>

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
	<img class="mySlides" src="./image_1.jpg" style="background-color: red;">
	<img class="mySlides" src="./image_2.jpg" style="background-color: green;">
	<img class="mySlides" src="./image_3.jpg" style="background-color: blue;">
  
	<button id="slideLeftBtn" class="w3-button w3-black w3-display-left">&#10094;</button>
	<button id="slideRightBtn" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>

</body>
</html>
0
Denis O. 28 sep. 2019 a las 01:45

Tienes múltiples problemas:

Primero, la selección del botón. Estás tratando de obtener los 2 botones con la misma identificación, tienes que cambiar eso.

Entonces, esas 2 líneas:

let slideForward = plusDivs(1);
let slideBack = plusDivs(-1);

plusDivs(1) y plusDivs(-1) llaman a la función y devuelven el valor. Para solucionarlo, puede crear una función anónima (o una función de flecha) para llamar a plusDivs

Aquí hay una versión fija (cambié el ancho de las imágenes al 25% para que sea más fácil de ver en el fragmento):

let leftSlideButton = document.getElementById("clickerLeft");
let rightSlideButton = document.getElementById("clickerRight");

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  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";  
}


leftSlideButton.onclick = () => plusDivs(1);
rightSlideButton.onclick = () => plusDivs(-1);
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://via.placeholder.com/150" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/200" style="width:25%">
  <img class="mySlides" src="https://via.placeholder.com/250" style="width:25%">

  <button id="clickerLeft" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clickerRight" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>
0
Seblor 27 sep. 2019 a las 23:07

No puede tener dos identificadores idénticos, así que le di a los botones identificadores separados, luego adjunté un detector de eventos a cada uno con addEventListener. Dentro de cada oyente agregué la función plusDivs() directamente.

let leftSlideButton = document.getElementById("clicker-left");
let rightSlideButton = document.getElementById("clicker-right");

var slideIndex = 1;
showDivs(slideIndex);

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

function showDivs(n) {
  var i;
  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";  
}

leftSlideButton.addEventListener("click",  () => {plusDivs(1)});
rightSlideButton.addEventListener("click", () => {plusDivs(-1)});
.w3-content > img{
   max-height: 200px;
   object-fit: contain;
   background-color: lightblue;
}
<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides" src="http://placekitten.com/100/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/200/200" style="width:100%">
  <img class="mySlides" src="http://placekitten.com/150/200" style="width:100%">

  <button id="clicker-left" class="w3-button w3-black w3-display-left">&#10094;</button>
  <button id="clicker-right" class="w3-button w3-black w3-display-right">&#10095;</button>
</div>
0
symlink 27 sep. 2019 a las 23:11