Vanilla JavaScript carousel translateX 问题

如何解决Vanilla JavaScript carousel translateX 问题

我正在处理这个 Vanilla JS carousel，但是 translateX 有问题。在较小的屏幕尺寸上，当它到达终点时不会显示轮播中的所有项目，而在较大的屏幕尺寸上，它会在轮播中的最后一个项目之后留下空白区域。这可能是它如何计算 translateX 值的问题。轮播应一次滑动 3 个项目，并且还包含 10 个项目。

const carouselInteraction = (carousel) => {
  // Main Selectors
  //##############
  if (!carousel) return;

  let elementsList = carousel.children[0].querySelector(".innerList");
  const elements = elementsList.querySelectorAll(".innerList__item");
const navigation = document.querySelectorAll(
    `[data-navigation-type='${carousel.getAttribute("data-carousel-type")}']`
  )[0];

  // Slider params
  //##############
  let carouselListSteps = 0;
  let carouselAmount = 0;
  const carouselAmountVisible = 5;
  const itemsToTransition = 3;
  const elementWidth = 345;
  const total = 10;

  // Navigation Buttons
  //##############
  const transitionPrev = navigation.firstElementChild;
  const transitionNext = navigation.lastElementChild;

  // Iterate over all the slider elements
  //##############
  [].forEach.call(elements,(element) => {
    element.style.width = `${elementWidth}px`;
    carouselAmount++;
  });

  elementsList.style.width = elementWidth * total + (24 * total - 1)  + "px";
  //24 is the margin of the element
  
  transitionNext.onclick = () => {
    if (carouselListSteps < carouselAmount - carouselAmountVisible) {
      carouselListSteps += itemsToTransition;
      moveCarouselList();
    }
  };

  transitionPrev.onclick = () => {
    if (carouselListSteps > 0) {
      carouselListSteps -= itemsToTransition;
      moveCarouselList();
    }
  };

  const moveCarouselList = () => {
    elementsList.style.transform = `translateX(${-elementWidth * carouselListSteps}px)`;
  };
};

.carouselWrapper {
  padding-left: 20px;
}
  
 .carouselWrapper--list {
    height: 445px;
    margin: auto;
    overflow: hidden;
    position: relative;
 }

.innerList {
  position: absolute;
  margin: 0;
  padding: 0;
  transition: all 0.9s ease-in-out; 
  transform: translateX(0px);
  list-style: none;
  height: 445px;
}

.innerList__item {
    width: 344px;
    height: 445px;
    display: inline-block;
 }
 
 .innerList__item:not(:first-child) {
    margin-left: 24px;
  }

.element {
  display: table;
  height: 100%;
  width: 100%;
  background-color: #f7f7f7;
  Box-shadow: 2px 2px 2px darkgrey;
}

.element span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: white;
    font-size: 50px;
  }

   <div class="navigation" data-navigation-type="top-products">
        <button class="carouselControl carousel-prevIoUs">
          <i class="icon">prevIoUs</i>
        </button>
        <button class="carouselControl carousel-next">
          <i class="icon">next</i>
        </button>
    </div>
    <div class="carouselWrapper" data-carousel-type="top-products">
      <div class="carouselWrapper--list">
        <ul class="innerList">
          <li class="innerList__item">
            <div data-slide-index="1" class="element">
              <span>1</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="2" class="element">
              <span>2</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="3" class="element">
              <span>3</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="4" class="element">
              <span>4</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="5" class="element">
              <span>5</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="6" class="element">
              <span>6</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="7" class="element">
              <span>7</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="8" class="element">
              <span>8</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="9" class="element">
              <span>9</span>
            </div>
          </li>
          <li class="innerList__item">
            <div data-slide-index="10" class="element">
              <span>10</span>
            </div>
          </li>
        </ul>
      </div>
    </div>