I am a total newbie so please be kind.

I am trying to apply a transition to left in my carousel, but it does not work, the pictures just replace each other instead of sliding to the left. For transition I used example from https://youtu.be/FZrHoAUkHpE?t=183.

It also says add position: relative to this div, but it does not work as well, plus it hides the prev-next buttons as a result.

Here is my html:

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

Then CSS:

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

And the JS code:

(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);
})();

So the carousel does work, but the transition effect does not. Any ideas on what is going wrong? Thanks!