好的，我目前有一个 HTML 轮播滑块，其中涉及一些 JS。
利益不仅是控制我剩下的理智（我知道，“理智”对吗？再次提醒我那是什么？）而且还要避免拿起我的电脑并反复把它扔到墙上，可以看看下面的代码并告诉我为什么我不能让幻灯片 - 好吧 - 幻灯片。
谢谢
@charset "utf-8";
/* CSS Document */
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
}
.content{
height: 400px;
width: 750px;
overflow: hidden;
}
.content .images{
height: 100%;
width: 100%;
}
.images div{
height: 100%;
width: 100%;
}
.btm-sliders{
position: absolute;
bottom: 20px;
left: 50%;
display: flex;
transform: translate(-50%);
}
.btm-sliders span{
height: 15px;
width: 50px;
border: 4px solid red;
margin: 0 3px;
cursor: pointer;
}
.content .slide{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
/*height: 45px;*/
border: 2px solid red;
cursor: pointer;
background: rgba(255,255,255,0.1);
}
.content .slide:hover{
background-color:#0d0155;
}
.slide span{
font-size: 35px;
color: red;
line-height: 41px;
}
.content .right{
right: 5px;
}
.content .left{
left: 5px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="styles-carousel.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/ad445e50d3.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content">
<div class="images">
<div class="">You</div>
<div class="">should</div>
<div class="">see</div>
<div class="">this</div>
<div class="">one at a time</div>
</div>
<div onClick = "side_slide(-1)" class="slide left">
<span class="fas fa-angle-left"></span>
</div>
<div onClick = "side_slide(1)" class="slide right">
<span class="fas fa-angle-right"></span>
</div>
<div class="btm-sliders">
<span onClick = "btm_slide(1)"></span>
<span onClick = "btm_slide(2)"></span>
<span onClick = "btm_slide(3)"></span>
<span onClick = "btm_slide(4)"></span>
<span onClick = "btm_slide(5)"></span>
</div>
</div>
<script>
var indexValue = 1;
showImg(indexValue);
function btm_slide(e){showDiv(indexValue = e);}
function side_slide(e){showDiv(indexValue += e);}
function showImg(e){
var i;
const div = document.querySelectorAll('Div');
const sliders = document.querySelectorAll('.btm-sliders span');
if(e > div.length){indexValue = 1}
if(e < 1){indexValue = div.length}
for(i = 0; i < Div.length; i++){
div[i].style.display = "none";
}
for(i = 0; i< Div.length; i++){
sliders[i].style.background = "rgba(255,255,255,0.1)";
}
div[indexValue-1].style.display = "block";
sliders[indexValue-1].style.background= "white";
}
</script>
</body>
</html>