1

Tengo un carrusel infinito de imágenes que funciona haciendo clic en unos botones en la parte inferior. El funcionamiento es el siguiente: al hacer clic entra una imagen por la derecha de la pantalla, la imagen permanece hasta hacer clic en otro botón y la imagen sale por la izquierda permitiendo la entrada por derecha de la foto correspondiente.

El problema está al hacer clic en botones contiguos precedentes ya que la imagen no está ubicada en su posición original (a la derecha) por lo que el slide parte desde la izquierda. En el código ejemplo, al hacer clic indistintamente en los botones A o B. No sé si esto tiene solución

const imageContainer = document.getElementById("image-container");
const imageSlides = imageContainer.querySelectorAll(".image-slide");
let currentSlideIndex = 0;

function showImage(slideIndex) {  
  imageSlides.forEach(slide => {  
   slide.classList.remove("active");  
   slide.classList.remove("exit");  
  });  
  
  imageSlides[slideIndex - 1].classList.add("active");  
  
  if (currentSlideIndex > 0) {  
   imageSlides[currentSlideIndex - 1].classList.add("exit");  
  }  
  
  currentSlideIndex = slideIndex;  
}

const buttons = document.querySelectorAll(".gota");

buttons.forEach((button, index) => {
  button.addEventListener("click", () => showImage(index + 1));

});
* {font-family: helvetica; text-align: center; font-size: 14px; font-weight:bold;}

.container {width: 100vw;
height: 100vh; }

.buttons {display:grid; 
width: 100%;
height: 100%; 
grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
gap: 30px;
grid-auto-flow: row;
justify-items: center;
align-items: center;
justify-content: center; 
}

.gota {top:-80px;
width: 25px;
height: 20px;
border-radius: 25%;
background-color:red;
position: relative;
margin: 10px auto;
cursor:pointer;
padding-top:4px;
color:#fff;

}


#image-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden; top:20%;
}



.image-slide {content:'';
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
object-fit: cover;
transition: left 1s ease-in-out;
z-index:0;
}

#image1 {background-color:blue;}
#image2 {background-color:gray;}
#image3 {background-color:brown;}
#image4 {background-color:orange;}
#image5 {background-color:purple;}
#image6 {background-color:darkgreen;}



.image-slide.active {
  left: 0; 
  z-index:20;
}

.image-slide.exit {
  left: -100%;
z-index:20;
}
<div class="container">

<div id="image-container" >
<img src="#" class="image-slide" id="image1">
<img src="#" class="image-slide" id="image2">
<img src="#" class="image-slide" id="image3">
<img src="#" class="image-slide" id="image4">
<img src="#" class="image-slide" id="image5">
<img src="#" class="image-slide" id="image6">
</div>

  
<div class="buttons">  
<div class="gota"></div>
<div class="gota"></div>
<div class="gota">A</div>
<div class="gota">B</div>
<div class="gota"></div>
<div class="gota"></div>
</div>
<div>

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.