Creé un control deslizante de imagen usando HTML y JS. Un problema con el que me he encontrado y que no puedo solucionar es cómo el control deslizante de imágenes transmite múltiples imágenes para cada diapositiva cuando las dimensiones de la imagen no se ajustan perfectamente a la caja. Me gustaría cambiar este código para que solo se muestre una imagen a la vez + la imagen esté centrada en el cuadro. ¿Alguien tiene alguna sugerencia sobre cómo podría editar esto? Por favor, hágamelo saber si se necesita cualquier información adicional.
const carouselSlide = document.querySelector('.carousel-slide'); const carouselImages = document.querySelectorAll('.carousel-slide img'); const prevBtn = document.querySelector('#prevBtn'); const nextBtn = document.querySelector('#nextBtn'); let counter = 1; const size = carouselImages[0].clientWidth; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; //Button Listeners nextBtn.addEventListener('click', () => { if (counter >= carouselImages.length - 1) { return; } carouselSlide.style.tranisition = "transform 0.4s ease-in-out" counter++; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); prevBtn.addEventListener('click', () => { if (counter <= 0) { return; } carouselSlide.style.tranisition = "transform 0.4s ease-in-out" counter--; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; }); carouselSlide.addEventListener('transitonend', () => { if (carouselImages[counter].id === 'lastclone') { carouselSlide.style.transition = "none"; counter = carouselImage.length - 2; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; } if (carouselImages[counter].id === 'firstclone') { carouselSlide.style.transition = "none"; counter = carouselImage.length - counter; carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)'; } }); <div class="carousel-container"> <i class="fa fa-arrow-left" id="prevBtn" aria-hidden="true"></i> <i class="fa fa-arrow-right" id="nextBtn" aria-hidden="true"></i> <div class="carousel-slide"> <img src="public/images/homme.jpeg" id="lastClone" alt=""> <img src="public/images/homme.jpeg" alt=""> <img src="public/images/homme.jpeg" alt=""> <img src="public/images/homme.jpeg" alt=""> <img src="public/images/homme.jpeg" id="firstClone" alt=""> </div> </div> </div>Una opción sería colocar cada imagen en el centro de su propio contenedor div que tenga el tamaño de la imagen más grande, alinear esos divs y hacer que su carouselSlide se deslice sobre esos divs, de modo que solo muestre un div a la vez.
Esto puede producir márgenes para imágenes que son más pequeñas que la imagen más grande. Una forma de resolverlo es usar CSS para configurar las imágenes como imágenes de fondo de los divs y usar CSS para centrar las imágenes y llenar el div.