将 CSS 图像滑块导航转换为 JavaScript [已关闭]

问：

我参考本教程，使用 HTML 和 CSS 为客户端项目创建了一个基本的图像滑块。但是，我想将导航转换为 JavaScript 并避免使用锚标记，因为这似乎不是最合适的解决方案。有什么想法吗？

HTML格式：

<div class="slider-wrapper">
    
  <div class="slider">
  <img id="slide-01" src="/image-01.jpg">
  <img id="slide-02" src="/image-02.jpg">
  </div>
      
  <div class="slider-nav">
  <a href="#slide-01"></a>
  <a href="#slide-02"></a>
  </div>
    
</div>

CSS：

.slider-wrapper {
  position: relative;
}

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 30px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow-x: hidden;
}

.slider-nav a {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background-color: #0d0d0d;
  transition: opacity ease 250ms;
}

经过测试，我决定实施这个解决方案。使用 JavaScript，我可以在一个页面上包含多个图像滑块，并消除使用纯 CSS 方法发生的不需要的垂直滚动。也就是说，我知道有一些未使用的 CSS 经过调整;但是，我仍然希望包含滚动交互以补充按钮导航。

HTML格式：

<div id="slider-01" class="slider-wrapper">
    
  <div class="slider">
  <img id="slide" src="/image-01.jpg">
  </div>

  <div class="slider">
  <img id="slide" src="/image-02.jpg">
  </div>
      
  <div class="slider-nav" >
  <span class="slider-dot" onclick="currentSlide(1, slider01)"></span> 
  <span class="slider-dot" onclick="currentSlide(2, slider01)"></span> 

</div>
    
</div>

  <div id="slider-02" class="slider-wrapper">
      
  <div class="slider">
  <img id="slide" src="/image-01.jpg">
  </div>

  <div class="slider">
  <img id="slide" src="/image-02.jpg">
  </div>
        
  <div class="slider-nav">
  <span class="slider-dot" onclick="currentSlide(1, slider02)"></span> 
  <span class="slider-dot" onclick="currentSlide(2, slider02)"></span> 
  </div>
    
</div>

  <div id="slider-03" class="slider-wrapper">

  <div class="slider">
  <img id="slide" src="/image-01.jpg">
  </div>

  <div class="slider">
  <img id="slide" src="/image-02.jpg">
  </div>   

  <div class="slider-nav">
  <span class="slider-dot" onclick="currentSlide(1, slider03)"></span> 
  <span class="slider-dot" onclick="currentSlide(2, slider03)"></span> 
  </div>

</div>

CSS：

.slider-wrapper {
  position: relative;
}

.slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: 30px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  overflow-x: hidden;
}

.slider-nav a {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background-color: #0d0d0d;
  transition: opacity ease 250ms;
}

.slider-nav a:hover {
  background-color: #ec008c;
}

.slider-dot {
  cursor: pointer;
  height: .75rem;
  width: .75rem;
  margin-bottom: 5px;
  background-color: #0d0d0d;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.active, .slider-dot:hover {
  background-color: #ec008c;
}

JavaScript的：

var slider01 = document.getElementById("slider-01");
slider01.currentSlideIndex = 1;
showSlides(slider01.currentSlideIndex, slider01);

var slider02 = document.getElementById("slider-02");
slider02.currentSlideIndex = 1;
showSlides(slider02.currentSlideIndex, slider02);
  
var slider03 = document.getElementById("slider-03");
slider03.currentSlideIndex = 1;
showSlides(slider03.currentSlideIndex, slider03);

function currentSlide(n, slider) {
  showSlides(slider.currentSlideIndex = n, slider);
}

function showSlides(n, slider) {

  var i;
  var slides = slider.getElementsByClassName("slider");
  var dots = slider.getElementsByClassName("slider-dot");
  if (n > slides.length) {slider.currentSlideIndex = 1}    
  if (n < 1) {slider.currentSlideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
  slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slider.currentSlideIndex-1].style.display = "flex";  
    dots[slider.currentSlideIndex-1].className += " active";
}