如何隐藏所有幻灯片并以JavaScript显示当前幻灯片？

我正在用Vanilla JavaScript创建一个滑块

我有一个基本的基础。

现在我不知道如何隐藏所有其他幻灯片，而只显示当前幻灯片。然后在下一张/上一张幻灯片上，显示下一张幻灯片，并隐藏前一张幻灯片

我试过的东西很少，但都不管用

这是代码笔：

//问题：让幻灯片一张接一张地滑动
//并使按钮“上一页”和“下一页”工作，以显示“上一页”或“下一页”
//解决方案
//选择所有幻灯片
//在“下一个/上一个”中，获取从0到100或从0到-100%的左/右动画
//按下按钮，获取上一个/下一个父节点
//在显示的屏幕上添加活动类
//解决方案第2部分
//选择所有幻灯片
//获取幻灯片的长度
//在每个幻灯片项上显示“无”
//获取当前幻灯片
//在当前幻灯片上显示块/柔性
//在下一步中，将滑块索引前进1
//在prev上，将滑块索引提前-1
//以设定间隔使滑块每3秒滑动一次
//即使是滑动鼠标上的侦听器，也要停止自动滑动并添加“暂停”的HTML-add
//在slder上，取消暂停并删除HTML“暂停”
document.addEventListener（'DOMContentLoaded'，function（）{
var slider=document.querySelector（“.slider”），
sliderList=document.querySelector（“.slider\u列表”），
sliderItems=document.querySelectorAll（“.slider\u项”），
sliderBtnPrev=document.querySelector（“.slider\u按钮--prev”），
sliderbtnext=document.querySelector（“.slider\u按钮--next”），
sliderItemsLength=sliderItems.length，
currentIndex=0，
isPaused=false；
函数prevSlide（）{
sliderItems[currentIndex].classList.remove（'is-active'）；
currentIndex=（currentIndex+sliderItemsLength-1）%sliderItemsLength；
sliderItems[currentIndex].classList.add（'is-active'）；
}
函数nextSlide（）{
sliderItems[currentIndex].classList.remove（'is-active'）；
currentIndex=（currentIndex+1）%sliderItemsLength；
sliderItems[currentIndex].classList.add（'is-active'）；
}
功能推进（）{
isPaused=false；
如果（（isPaused=false）=1）{
setInterval（函数（）{
nextSlide（）；
}, 3000);
}
}
sliderBtnPrev.addEventListener（'click'，function（）{
prevSlide（）；
});
sliderbtnext.addEventListener（'click'，function（）{
nextSlide（）；
});
slider.addEventListener（'mouseover'，function（）{
isPaused=真；
});
slider.addEventListener（'mouseout'，function（）{
isPaused=false；
});
前进（）；
//按“下一步”，更改幻灯片
//forEach（函数（sliderItem）{
//sliderItem.style.display=“无”；
// });
//函数prevSlide（）{
//console.log（“上一张幻灯片”）；
//    }
//函数nextSlide（）{
//console.log（“下一张幻灯片”）；
////如果（当前索引）{
////console.log（sliderItems[currentIndex]）
//       // }
////sliderItemsLength.push[1]；
////当前索引+1；
////console.log（currentIndex<（sliderItemsLength+1））；
////console.log（sliderItems[currentIndex+1]）
////如果（sliderItemsLength<-1）{
////sliderItemsLength++；
//       // }
////如果（当前索引<（sliderItemsLength+1））{
////sliderItems[currentIndex].classList.add（'is-active'）；
//       // }
////如果（numbers.length>3）{
////numbers.length=3；
//       // }
////myArray[myArray.length-1]+1
//如果（当前索引<（滑块长度+1））{
//sliderItems[currentIndex].classList.add（'is-active'）；
//currentIndex++；
//}其他{
//sliderItems.style.display=“无”；
//       }
//    }
});
*{
框大小：边框框；
}
ul，
ol{
保证金：0；
填充：0；
列表样式：无；
}
.滑块{
位置：相对位置；
高度：350px；
宽度：100%；
}
.滑块列表{
身高：100%；
溢出：隐藏；
位置：相对位置；
}
.slider\u项目{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
宽度：100%；
显示：无；
身高：100%；
宽度：100%；
位置：绝对位置；
}
.slider\uuu item.is-active{
显示器：flex；
}
.slider\u项：第一个子项{
背景颜色：橙色；
}
.slider\u项：第n个子项（2）{
背景颜色：金色；
}
.slider\u项：最后一个子项{
背景颜色：绿色；
}
.滑块标题{
颜色：白色；
字体大小：粗体；
字号：1.5em；
}
.滑块按钮{
位置：绝对位置；
右：0；
左：0；
最高：50%；
}
.滑块按钮-上一个{
高度：40px；
宽度：40px；
背景色：红色；
光标：指针；
位置：绝对位置；
底部：0；
保证金：自动；
排名：0；
左：30px；
}
.滑块按钮-下一步{
高度：40px；
宽度：40px；
背景色：红色；
光标：指针；
位置：绝对位置；
底部：0；
排名：0；
保证金：自动；
右：30px；
}



1.


2.


3.



默认情况下，您需要隐藏所有幻灯片
display:none
，然后定义一个类
处于活动状态
，将
显示更改为
flex

从
-1开始计数

计算下一张幻灯片的公式为：

（当前索引+1）%sliderItemsLength


计算上一张幻灯片的公式为：

（当前索引+滑块长度-1）%滑块长度


document.addEventListener（'DOMContentLoaded'，function（）{
var sliderList=document.querySelector（“.slider\u list”），
sliderItems=document.querySelectorAll（“.slider\u项”），
sliderBtnPrev=document.querySelector（“.slider\u按钮--prev”），
sliderBtnNext=document.querySelector（“.slided