试图做一个图像滑块，但没有任何效果。我对每个人都说很容易做到的事情有很大的困难。我一直在学习本教程。
https://www.youtube.com/watch?v=KcdBOoK3Pfw&list=WL&index=19&t=601s
然而按钮似乎不起作用。图像不适合里面。我不在乎他们中的三个是否出现在这一点上，我只是希望它能够工作。
图像不仅会进入容器。他们都进去了。二合一不是我的本意。我想要一张照片而不是下一张照片。
我对此还是很陌生。所以可能会继续尝试、尝试和理解，但会尝试为个人项目完成这项工作。任何人都可以帮助并向我解释我做错了什么。
这是我的代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="gallery.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="slide">
<img src="./image/pic7.jpg" id="lastClone">
<img src="image/pic1.jpg">
<img src="image/pic2.jpg">
<img src="image/pic3.jpg">
<img src="image/pic4.jpg">
<img src="image/pic6.jpg">
<img src="image/pic7.jpg">
<img src="./image/pic1.jpg" id="firstclone">
</div>
</div>
<button id="prevbtn">Prev</button>
<button id="nextbtn">Next</button>
<script src="app.js"></script>
</body>
</html>
CSS：
*{
padding:0px;
margin:0px;
box-sizing: border-box;
}
.container {
width: 40%;
margin:auto;
border: 5px solid black;
overflow:hidden;
}
.slide {
display:flex;
width:100%;
height:500px;
}
button{
padding:20px;
border:none;
background:#37f;
font-size: 30px;
color:white;
position:absolute;
top:45%;
}
#nextbtn{
border-radius: 10px 0px 0px 10px;
margin-left:950px;
}
#prevbtn{
border-radius: 0px 10px 10px 0px;
}
JAVASCRIPT：
const carouselSlide =docuement.querySelector('.slide');
const carouselImages=document.querySelectorAll('.slide img');
const prevbtn = document.querySelector('#prevbtn');
const nextbtn = document.querySelector('#nextbtn');
let counter=1;
const size=carouselImages[0].clientWidth;
carouselSlide.style.transform='translateX(' + (-size *counter) + 'px)';
nextbtn.addEventListener('click',()=>{
if (counter >= carouselImages.length-1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter ++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
prevbtn.addEventListener('click',()=>{
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter ++;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
});
carouselSlide.addEventListener('transitionend', () => {
if (carouselImages[counter].id=='lastClone') {
carouselSlide.style.transition = "none";
counter=carouselImages.length -2;
carouselSlide.style.transform= 'translateX(' +(-size * counter) + 'px)';
}
if (carouselImaages[counter].id=='firstClone') {
carouselSlide.style.transition = "none";
counter=carouselImaages.length -counter;
carouselSlide.style.transform= 'translateX(' +(-size * counter) + 'px)';
}
});