Javascript js幻灯片未与内部元素对齐？

我的代码中有一个半工作视频幻灯片。幻灯片从两个视频元素之间开始，而不是第一个视频。我有一个计数器，我用左箭头和右箭头跟踪，以显示右侧视频。第一个和最后一个视频元素各有一个克隆，因此当到达滑块末端时，计数器将重新启动。我遵循了一个关于图像滑块的教程，以便在另一个项目中使用它。是视频元素吗？不知道哪里出了问题，控制台中没有错误

const slider=document.querySelector（'.slider proj'）；
const sliderVideos=document.querySelectorAll（'.sliderproj video'）；
//钮扣
const leftbtn=document.querySelector（'#left'）；
const rightbn=document.querySelector（“#right”）；
设计数器=1；
const size=sliderVideos[0].clientWidth；
slider.style.transform='translateX（+-size*计数器）+'px'；
rightbtn.addEventListener（'单击'，（）=>{
if（counter>=sliderveos.length-1）返回；
slider.style.transition=“transform 0.4s ease-in”；
计数器++；
slider.style.transform='translateX（'+（-size*计数器）+'px）'
})
leftbtn.addEventListener（'单击'，（）=>{
if（计数器{
如果（sliderVideos[计数器].id==“lastClone”）{
slider.style.transition=“无”；
计数器=slidevos.length-2；
slider.style.transform='translateX（'+（-size*计数器）+'px）'
}
if（sliderVideos[计数器].id==“firstClone”）{
slider.style.transition=“无”；
计数器=slidevos.length-计数器；
slider.style.transform='translateX（'+（-size*计数器）+'px）'
}
})

#归档电影{
背景色：白色；
最小宽度：100vw；
最小高度：90vh；
滚动行为：平滑；
}
.lookbook项目{
宽度：65%；
高度：88vh；
保证金：自动；
溢出：隐藏；
}
.lookbook项目视频{
宽度：100%；
高度：自动；
}
.滑块项目{
页边顶部：1rem；
/*位置：绝对位置*/
显示器：flex；
宽度：自动；
高度：700px；
}
.了望台导航{
宽度：80vw；
高度：10vh；
左边距：10vw；
边际上限：40vh；
位置：绝对位置；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
钮扣{
边界：无；
大纲：无；
背景：透明；
字号：2rem；
/*字体大小：粗体*/
光标：指针；
}

←
→