如何使用javascript将向下切换div更改为左右幻灯片

<div class="slider-container">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

.slider-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  display: flex;
}

.slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

var currentSlide = 0;
var slides = document.getElementsByClassName("slide");

function showSlide(index) {
  // 隐藏当前幻灯片
  slides[currentSlide].style.display = "none";
  // 显示目标幻灯片
  slides[index].style.display = "block";
  // 更新当前幻灯片索引
  currentSlide = index;
}

function prevSlide() {
  var index = (currentSlide - 1 + slides.length) % slides.length;
  showSlide(index);
}

function nextSlide() {
  var index = (currentSlide + 1) % slides.length;
  showSlide(index);
}

window.onload = function() {
  showSlide(currentSlide);
};