js幻灯片无法与内部元素对齐？

问题描述

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

const slider = document.querySelector('.slider-proj');
const sliderVideos = document.querySelectorAll('.slider-proj video');
//  buttons

const leftbtn = document.querySelector('#left');
const rightbtn = document.querySelector('#right');

let counter = 1;
const size = sliderVideos[0].clientWidth;

slider.style.transform = 'translateX(' + (-size * counter) + 'px)';

rightbtn.addEventListener('click',() => {
  if (counter >= sliderVideos.length - 1) return;
  slider.style.transition = "transform 0.4s ease-in";
  counter++;
  slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
})

leftbtn.addEventListener('click',() => {
  if (counter <= 0) return;
  slider.style.transition = "transform 0.4s ease-in";
  counter--;
  slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
})

slider.addEventListener('transitionend',() => {
  if (sliderVideos[counter].id === "lastClone") {
    slider.style.transition = "none";
    counter = sliderVideos.length - 2;
    slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
  }
  if (sliderVideos[counter].id === "firstClone") {
    slider.style.transition = "none";
    counter = sliderVideos.length - counter;
    slider.style.transform = 'translateX(' + (-size * counter) + 'px)'
  }
})

#archiveFilms {
  background-color: white;
  min-width: 100vw;
  min-height: 90vh;
  scroll-behavior: smooth;
}

.lookbook-proj {
  width: 65%;
  height: 88vh;
  margin: auto;
  overflow: hidden;
}

.lookbook-proj video {
  width: 100%;
  height: auto;
}

.slider-proj {
  margin-top: 1rem;
  /* position: absolute; */
  display: flex;
  width: auto;
  height: 700px;
}

.lookbook-nav {
  width: 80vw;
  height: 10vh;
  margin-left: 10vw;
  margin-top: 40vh;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

button {
  border: none;
  outline: none;
  background: transparent;
  font-size: 2rem;
  /* font-weight: bold; */
  cursor: pointer;
}

<div id="archiveFilms">

  <div class="lookbook-nav">
    <button id="left">←</button>
    <button id="right">→</button>
  </div>
  <div class="lookbook-proj">
    <div class="slider-proj">
      <video src="/Home/projects/We create Paths by Walking (2016).mp4" id="lastClone" loop video controls preload="Metadata"></video>
      <video src="/Home/projects/B L U E - Research Film (2015).mp4" loop video controls preload="Metadata"></video>
      <video src="/Home/projects/LV Project_ Hologram Presentation (2016).mp4" loop video controls preload="Metadata"></video>
      <video src="/Home/projects/We create Paths by Walking (2016).mp4" loop video controls preload="Metadata"></video>
      <video src="/Home/projects/B L U E - Research Film (2015).mp" id="firstClone" loop video controls preload="Metadata"></video>
    </div>
  </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）