稍微调整我的图像滑块（添加过渡动画）

Question

大家好，我创建了此图像滑块，我想添加过渡动画，我想要的过渡类似于  this

这也是我的Javascript代码：

let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

还有我的html：

<div className="Slider">
      <div id="arrow-left" className="arrow"></div>

      <div id="slider">

        <div className="slide slide1">
          <div className="slide-content">
            <span>My vám doručíme kvalitu<br/> na úrovni</span>
            <button>Pozrieť viac</button>
          </div>
        </div>

        <div className="slide slide1">
          <div className="slide-content">
            <span>Na tomto slide vám taktiez<br/> doručíme kvalitu</span>
            <button>Pozrieť viac</button>
          </div>
        </div>

      </div>

      <div id="arrow-right" className="arrow"></div>
  </div>

我的JavaScript可能太长或效率不高，但我刚开始从youtube获得灵感，但效果很好，但没有过渡效果