Soy un novato total, así que por favor sea amable.

Estoy tratando de aplicar una transición a la izquierda en mi carrusel, pero no funciona, las imágenes simplemente se reemplazan entre sí en lugar de deslizarse hacia la izquierda. Para la transición, utilicé un ejemplo de https://youtu.be/FZrHoAUkHpE?t=183 .

También dice agregar position: relative a este div, pero no funciona tan bien, además, como resultado, oculta los botones anterior-siguiente.

Aquí está mi html:

 <div class="brewery-gallery__images--main"></div>

Entonces CSS:

 .brewery-gallery__images--main { transition: left 2s; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; }

Y el código JS:

 (function () { const slides = [ `<img src="img/brewery-gallery/gallery2-photo1.png" alt="Two bearded men in a brewery with bottles on the foreground" class="brewery-gallery__img--main">`, `<img src="img/brewery-gallery/gallery2-photo2.png" alt="Beer barrels in a brewery" class="brewery-gallery__img--main">`, `<img src="img/brewery-gallery/gallery2-photo3.png" alt="beer bottles production line" class="brewery-gallery__img--main">`, `<img src="img/brewery-gallery/gallery2-photo4.png" alt="A bearded man holding a beer barrel" class="brewery-gallery__img--main">`, `<img src="img/brewery-gallery/gallery2-photo5.png" alt="Two men working in a brewery" class="brewery-gallery__img--main">`, `<img src="img/brewery-gallery/gallery2-photo6.png" alt="Close-up of brown beer bottles on a production line" class="brewery-gallery__img--main">`, ]; let slideIdx = 0; function showCurrentSlide() { const slideContainer = document.querySelector( ".brewery-gallery__images--main" ); slideContainer.innerHTML = slides[slideIdx]; } function nextSlide() { slideIdx = slideIdx + 1 >= slides.length ? 0 : slideIdx + 1; showCurrentSlide(); } function prevSlide() { slideIdx = slideIdx - 1 < 0 ? slides.length - 1 : slideIdx - 1; showCurrentSlide(); } showCurrentSlide(); const nextButton = document.querySelector( ".brewery-gallery__slider_button-right" ); nextButton.addEventListener("click", nextSlide); const prevButton = document.querySelector( ".brewery-gallery__slider_button-left" ); prevButton.addEventListener("click", prevSlide); })();

Así que el carrusel funciona, pero el efecto de transición no. ¿Alguna idea sobre lo que está yendo mal? ¡Gracias!