如何让幻灯片指示器与当前幻灯片匹配?

Question

我用三张图像制作了这个香草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()

Answer 1

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

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

Answer 2

尚未对此进行测试，因此可能会有一些错误。setAnchor()函数重置所有点active并将类添加到current点。

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