Javascript 带自动播放的滑块以及带有CSS HTML JS的下一个和上一个箭头

我是一个初学者，我想知道是否有可能创建一个具有自动播放（淡入淡出或幻灯片效果，无所谓）和导航的下一个和上一个箭头的响应滑块，而不影响自动播放，只是从一个幻灯片切换到另一个幻灯片

我已经尝试过在网上找到的多种js解决方案，比如javascript的“setinterval”函数，但我总是遇到同样的问题，一种效果有效，而另一种效果无效

实际上，我已经在html和css中做了一个滑块，但我不能通过添加javascript函数来完成

我对所有的解决方案都持开放态度，即使只有js才有可能

我现在正在学习一门课程，这是一个项目的一部分

能做到吗

提前谢谢你

/*进度条效果*/
@关键帧加载{
0% {
变换：scaleX（0）；
}
100% {
转化：scaleX（100%）；
}
}
/*自动播放效应*/
@关键帧淡入淡出{
0% {
不透明度：1
}
45% {
不透明度：1
}
50% {
不透明度：0
}
95% {
不透明度：0
}
100% {
不透明度：1
}
}
@关键帧淡入淡出2{
0% {
不透明度：0
}
45% {
不透明度：0
}
50% {
不透明度：1
}
95% {
不透明度：1
}
100% {
不透明度：0
}
}
/*区段滑块*/
.滑块{
宽度：100%；
高度：550px；
保证金：20px自动；
位置：相对位置；
}
.幻灯片1，
.幻灯片2{
位置：绝对位置；
宽度：100%；
身高：100%；
}
.幻灯片1{
背景：url（'images/bg1.jpg'）没有重复中心；
背景尺寸：封面；
动画：渐弱30000s无限线性；
-webkit动画：渐弱30000s无限线性；
}
.幻灯片2{
背景：url（'images/bg2.jpg'）没有重复中心；
背景尺寸：封面；
动画：fade2 30000ms无限线性；
-webkit动画：fade2 30000ms无限线性；
}
/*进度条*/
.进度条{
位置：绝对位置；
底部：-76px；
左：0px；
高度：80px；
宽度：100%；
背景：颜色：rgba（192194192,0.8）；
边界半径：0 1px 1px；
盒影：插图0px 11px 14px-10px#737373，插图0px-11px 8px-10px#CCC；
}
.装载{
高度：4px；
宽度：100%；
背景：#5cad3；
动画：15000ms无限线性加载正常；
变换原点：0%；
}
/*左右滑动按钮*/
.滑块#按钮_左{
位置：绝对位置；
最高：45%；
左：0px；
背景色：rgba（70,70,70,0.6）；
宽度：35px；
高度：70像素；
边界半径：0px 50px 50px 0px；
}
.滑块#按钮_右{
位置：绝对位置；
最高：45%；
右：0px；
背景色：rgba（70,70,70,0.6）；
宽度：35px；
高度：70像素；
边界半径：50px 0px 0px 50px；
}
#按钮左：悬停，
#右键：悬停{
过渡：.3s；
背景色：rgba（99,99,99,1）；
颜色：#ffffff；
}
/*带字体的滑块的左右箭头*/
.fas.fa-V形-左{
位置：绝对位置；
左：0；
最高：30%；
左边距：5px；
颜色：#fff；
字体大小：25px；
}
.fas.fa-chevron-right{
位置：绝对位置；
右：0；
最高：30%；
右边距：5px；
颜色：白色；
字体大小：25px；
}

网络代理：lorem ipsum
lorem ipsum
同侧眼睑

网络代理：lorem ipsum
lorem ipsum
同侧眼睑

不需要库或框架来实现这一点。 所以，我已经不得不这么做了，事情并不像看上去那么复杂。 首先，我使用css pseudo class:checked和input type radio来选择要显示的幻灯片：

<div id="slider">
    <input type="radio" name="slider" checked> <!-- The first slide is displayed by default -->
    <div class="slide">...</div>

    <input type="radio" name="slider">
    <div class="slide">...</div>
    ...

    <div class="prev-button">prev</div>
    <div class="next-button">next</div>
</div>

那么，使用js应该更简单：

window.addEventListener("load",function(){
    let timer; let delay = 4000;
    let loader = document.querySelector("#slider .loader");
    let inputs = Array.from(document.querySelectorAll('#slider > input[type="radio"]'));
    //first, the go function that choose which input to check
    let go = (prev=false)=>{
        let checked = document.querySelector('#slider > input[type="radio"]:checked');
        let index = inputs.indexOf(checked);

        let next = ((prev) ? index -1 : index + 1);
        if(next >= inputs.length) next = 0; //restart from beginning
        else if(next < 0 ) next = inputs.length -1; //go to the last slide

        //restart the progress bar
        loader.classList.remove("loader");
        loader.classList.add("loader");
        inputs[next].checked = true;

    };
    //Allow you to define some sort of recursive timeout, otherwise it works only once
    let defineTimer = (callback)=>{
        timer = setTimeout(()=>{
            callback();
            defineTimer(callback);
        },delay);
    };
    //next, autoplay :
    defineTimer(go);

    //next, buttons:
    let next = document.querySelector("#slider > .next-button");
    let prev = document.querySelector("#slider > .prev-button");

    //clear the timer with `clearTimeout` each time you click on a button, if you don't 
    //and the user click on a button 3900ms after the autoplay call, the next/prev slide will only be displayed 
    //for 100ms and then switch to the next, which can be disturbing for the user.
    next.addEventListener("click",()=>{
        go();
        clearTimeout(timer);
        defineTimer(go);
    });
    prev.addEventListener("click",()=>{
        go(true);
        clearTimeout(timer);
        defineTimer(go);
    });
});

window.addEventListener（“加载”，函数（）{
let定时器；let延迟=4000；
让loader=document.querySelector（“slider.loader”）；
让inputs=Array.from（document.querySelectorAll（'#slider>input[type=“radio”]）；
//首先，go函数选择要检查的输入
放手=（上一个=假）=>{
let checked=document.querySelector（“#slider>input[type=“radio”]：checked”）；
设index=inputs.indexOf（选中）；
让next=（（上一个）？索引-1：索引+1）；
如果（next>=inputs.length）next=0；//从头开始重新启动
else if（next<0）next=inputs.length-1；//转到最后一张幻灯片
//重新启动进度条
loader.classList.remove（“loader”）；
loader.classList.add（“加载器”）；
输入[下一步]。选中=真；
};
//允许您定义某种递归超时，否则它只能工作一次
let defineTimer=（回调）=>{
计时器=设置超时（（）=>{
回调（）；
定义者（回调）；
}，延误）；
};
//接下来，自动播放：
定义者（go）；
//接下来，按钮：
let next=document.querySelector（“滑块>下一步按钮”）；
让prev=document.querySelector（#slider>.prev按钮”）；
//如果没有，请在每次单击按钮时用“clearTimeout”清除计时器
//当用户在自动播放呼叫3900毫秒后单击按钮时，将仅显示下一张/上一张幻灯片
//100毫秒，然后切换到下一个，这可能会干扰用户。
next.addEventListener（“单击”，（）=>{
go（）；
清除超时（计时器）；
定义者（go）；
});
上一个addEventListener（“单击”，（）=>{
去（真）；
清除超时（计时器）；
定义者（go）
window.addEventListener("load",function(){
    let timer; let delay = 4000;
    let loader = document.querySelector("#slider .loader");
    let inputs = Array.from(document.querySelectorAll('#slider > input[type="radio"]'));
    //first, the go function that choose which input to check
    let go = (prev=false)=>{
        let checked = document.querySelector('#slider > input[type="radio"]:checked');
        let index = inputs.indexOf(checked);

        let next = ((prev) ? index -1 : index + 1);
        if(next >= inputs.length) next = 0; //restart from beginning
        else if(next < 0 ) next = inputs.length -1; //go to the last slide

        //restart the progress bar
        loader.classList.remove("loader");
        loader.classList.add("loader");
        inputs[next].checked = true;

    };
    //Allow you to define some sort of recursive timeout, otherwise it works only once
    let defineTimer = (callback)=>{
        timer = setTimeout(()=>{
            callback();
            defineTimer(callback);
        },delay);
    };
    //next, autoplay :
    defineTimer(go);

    //next, buttons:
    let next = document.querySelector("#slider > .next-button");
    let prev = document.querySelector("#slider > .prev-button");

    //clear the timer with `clearTimeout` each time you click on a button, if you don't 
    //and the user click on a button 3900ms after the autoplay call, the next/prev slide will only be displayed 
    //for 100ms and then switch to the next, which can be disturbing for the user.
    next.addEventListener("click",()=>{
        go();
        clearTimeout(timer);
        defineTimer(go);
    });
    prev.addEventListener("click",()=>{
        go(true);
        clearTimeout(timer);
        defineTimer(go);
    });
});