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>