轮播幻灯片重叠

Question

我正在编写第一个网站的代码，但遇到了一个问题：当我将浏览器的大小从小窗口调整为大窗口时，轮播的幻灯片重叠了，但是从大窗口调整为大窗口时却没有问题。一个小窗口。当窗口以全屏模式打开时，轮播幻灯片会响应并且没有问题，但是如果我将窗口缩小，刷新然后再将窗口放大，则当前幻灯片右侧的幻灯片会开始重叠，但是幻灯片左边没有。请帮忙！

const track = document.querySelector(".carousel_track");
const slides = Array.from(track.children);
const nextButton = document.querySelector(".carousel_button--right");
const prevButton = document.querySelector(".carousel_button--left");
const dotsNav = document.querySelector(".carousel_nav");
const dots = Array.from(dotsNav.children);
const slidesWidth = slides[0].getBoundingClientRect().width;


const setSlidePosition = (slide, index) => {
  slide.style.left = slidesWidth * index + "px";
};

slides.forEach(setSlidePosition);

const moveToSlide = (track, currentSlide, targetSlide) => {
  track.style.transform = "translateX(-" + targetSlide.style.left; + ")";
  currentSlide.classList.remove("current-slide");
  targetSlide.classList.add("current-slide");
}

const updateDots = (currentDot, targetDot) => {
  currentDot.classList.remove("current-slide");
  targetDot.classList.add("current-slide");
}

const hideShowArrows = (slides, prevButton, nextButton, targetIndex) => {
  if (targetIndex === 0) {
    prevButton.classList.add("is-hidden");
    nextButton.classList.remove("is-hidden");
  } else if (targetIndex === slides.length - 1) {
    prevButton.classList.remove("is-hidden");
    nextButton.classList.add("is-hidden");
  } else {
    prevButton.classList.remove("is-hidden");
    nextButton.classList.remove("is-hidden");
  }
}

prevButton.addEventListener("click", e => {
  const currentSlide = track.querySelector(".current-slide");
  const prevSlide = currentSlide.previousElementSibling;
  const currentDot = dotsNav.querySelector(".current-slide");
  const prevDot = currentDot.previousElementSibling;
  const prevIndex = slides.findIndex(slide => slide === prevSlide);


  moveToSlide(track, currentSlide, prevSlide);
  updateDots(currentDot, prevDot);
  hideShowArrows(slides, prevButton, nextButton, prevIndex);
})

nextButton.addEventListener("click", e => {
  const currentSlide = track.querySelector(".current-slide");
  const nextSlide = currentSlide.nextElementSibling;
  const currentDot = dotsNav.querySelector(".current-slide");
  const nextDot = currentDot.nextElementSibling;
  const nextIndex = slides.findIndex(slide => slide === nextSlide);

  moveToSlide(track, currentSlide, nextSlide);
  updateDots(currentDot, nextDot);
  hideShowArrows(slides, prevButton, nextButton, nextIndex);
})

dotsNav.addEventListener("click", e => {
  //What indicator was clicked
  const targetDot = e.target.closest("button");

  if (!targetDot) return;

  const currentSlide = track.querySelector(".current-slide");
  const currentDot = dotsNav.querySelector(".current-slide");
  const targetIndex = dots.findIndex(dot => dot === targetDot);
  const targetSlide = slides[targetIndex];

  moveToSlide(track, currentSlide, targetSlide);
  updateDots(currentDot, targetDot);
  hideShowArrows(slides, prevButton, nextButton, targetIndex);
})

topic_preview {
  width: inherit;
}

.carousel {
  position: relative;
  height: 400px;
  width: 80%;
  margin: 0 auto;
}

.carousel_track-container {
  background: none;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 3px 1px #cfc9c8;
}

.carousel_track {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  height: 100%;
  transition: transform 250ms ease-in;
}

.carousel_slide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow-x: hidden;
}

.carousel_button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 40px;
  height: 400px;
  border: 1px solid #cfc9c8;
  border-radius: 3px;
  cursor: pointer;
  font-size: 50px;
  color: red;
  opacity: .5;
  transition: 250ms linear;
}

.carousel_button:hover {
  opacity: 1.0;
}

.carousel_button--left {
  left: -50px;
}

.carousel_button--right {
  right: -50px;
}

.carousel_nav {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  /* background: red; */
}

.carousel_indicator {
  border: 0;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: rgba(0, 0, 0, .3);
  margin: 0 12px;
  cursor: pointer;
}

.carousel_indicator.current-slide {
  background: rgba(0, 0, 0, .75);
}

.is-hidden {
  display: none;
}

<div class="carousel">
  <button class="carousel_button carousel_button--left is-hidden">&#10094;</button>
  <div class="carousel_track-container">
    <ul class="carousel_track">
      <li class="carousel_slide current-slide">
        <img class="topic_preview" src="https://picsum.photos/1000">
      </li>
      <li class="carousel_slide">
        <img class="topic_preview" src="https://picsum.photos/1000">
      </li>
      <li class="carousel_slide">
        <img class="topic_preview" src="https://picsum.photos/1000">
      </li>
    </ul>
  </div>
  <button class="carousel_button carousel_button--right">&#10095;</button>
  <div class="carousel_nav">
    <button class="carousel_indicator current-slide"></button>
    <button class="carousel_indicator"></button>
    <button class="carousel_indicator"></button>
  </div>
</div>