Javascript 如何使幻灯片指示器与当前幻灯片匹配？

我用三张图片制作了这个香草js图像滑块。在html中，我在滑块的底部有三个指示器点，一个css活动类用于活动指示器。不知道如何让类添加到幻灯片放映的当前幻灯片中，有帮助吗

let sliderImages = document.querySelectorAll('.slides'),
    prevArrow = document.querySelector('#prevBtn'),
    nextArrow = document.querySelector('#nextBtn'),
    dots = document.querySelectorAll('.indicator__dot'),
    current = 0;


reset = () => {
    for(let i = 0; i <sliderImages.length; i++) {
        sliderImages[i].style.display = 'none';
    }

}

startSlide = () => {
    reset();
    sliderImages[0].style.display = 'block'
}

prevSlide = () => {
    reset();
    sliderImages[current - 1].style.display = 'block';
    current -- ;
}

nextSlide = () => {
    reset();
    sliderImages[current + 1].style.display = 'block';
    current++;
}


prevArrow.addEventListener('click', () => {
    if(current === 0 ) {
        current = sliderImages.length;
    }
    prevSlide();
});

nextArrow.addEventListener('click', () => {
    if(current === sliderImages.length - 1 ) {
        current = -1
    }
    nextSlide();

});


startSlide()

let sliderImages=document.querySelectorAll（'.slides'），
prevArrow=document.querySelector（“#prevBtn”），
nextArrow=document.querySelector（“#nextBtn”），
dots=document.queryselectoral（'.indicator__dot'），
电流=0；
重置=（）=>{
for（设i=0；i{
重置（）；
幻灯片图像[0]。style.display='block'
}
上一张幻灯片=（）=>{
重置（）；
幻灯片图像[current-1].style.display='block'；
当前--；
}
nextSlide=（）=>{
重置（）；
幻灯片图像[current+1]。style.display='block'；
电流++；
}
prevArrow.addEventListener（'单击'，（）=>{
如果（当前===0）{
当前=幻灯片图像。长度；
}
prevSlide（）；
});
nextArrow.addEventListener（'click'，（）=>{
如果（当前===sliderImages.length-1）{
电流=-1
}
nextSlide（）；
});
startSlide（）

不，对不起，我应该说得更清楚一些，并包含一些html。我在滑块底部有3个点。当幻灯片1是当前图像时，第一个点将添加css类，当第二个图像显示时，第二个do将有活动类，第一个点不再。希望这更有意义

<div class="indicator">
     <span class="indicator__dot">&nbsp</span>
     <span class="indicator__dot">&nbsp</span>
     <span class="indicator__dot">&nbsp</span>
</div>

尚未测试，因此可能存在一些错误。

setAnchor（）

函数重置所有点，并将

active

类添加到当前

点

setAnchor = () => {
  for(let i = 0; i <dots.length; i++) {
    sliderImages[i].classList.remove("active");

    if(current === i){
      sliderImages[i].classList.add("active");
    }
  }
}

startSlide = () => {
    reset();
    sliderImages[current].style.display = 'block'
    setAnchor();
}

prevSlide = () => {
    reset();
    current -- ;
    sliderImages[current].style.display = 'block';
    setAnchor();
}

nextSlide = () => {
    reset();
    current++;
    sliderImages[current].style.display = 'block';
    setAnchor();
}

setAnchor=（）=>{
for（设i=0；i{
重置（）；
幻灯片图像[当前].style.display='block'
setAnchor（）；
}
上一张幻灯片=（）=>{
重置（）；
当前--；
幻灯片图像[当前].style.display='block'；
setAnchor（）；
}
nextSlide=（）=>{
重置（）；
电流++；
幻灯片图像[当前].style.display='block'；
setAnchor（）；
}
是否要将“活动”类添加到幻灯片中？如果是这样，为什么不简单地添加
幻灯片图像[0]。类列表。将（“活动”）
添加到
开始滑动
（以及
上一个幻灯片
，
下一个幻灯片
以及相应的索引）和
幻灯片图像[i]。类列表。在
重置
功能中删除（“活动”）
？