javascript - 如何使用 Vue.js 在 JavaScript 中循环使用表格制作的 Carousel

Question

我尝试使用 table 制作自定义轮播，但我很困惑如何在点击最后一个标签后让我的轮播循环(在这种情况下，最后一个标签表示 td 元素的最后一个)。目前我已经成功地让它自动播放，但我很困惑如何在自动播放到达最后一个元素时让它循环。
为了您的信息，我使用 Vue.js 来制作这个，这是 Sandbox if you want to try it
这是我的模板:

<template>

<div class="merchandise-item-wrapper">
  <table class="merchandise-table">
    <tr id="customWrapper">
      <td
        :class="index == 0 ? 'item-store active' : 'item-store'"
        v-for="(j, index) in 6"
        :key="index"
      >
        <div>
          <div
            class="portfolio-img bg-white position-relative text-center overflow-hidden"
          >
            <img
              class="merchandise-img"
              src="https://via.placeholder.com/300x300"
            />
          </div>
          <div style="padding-top: 3vh;">
            <div class="portfolio-hover-main text-center">
              <div class="portfolio-hover-box align-middle">
                <div
                  class="portfolio-hover-content position-relative"
                >
                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">
                        Kode Pesanan
                      </p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-code">
                        Putih (TS1), Hitam (TS2), Navy (TS3)
                      </p>
                    </div>
                  </div>

                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">
                        Deskripsi
                      </p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-text number-of-lines-3">
                        Lorem ipsum dolor sit amet consectetur,
                        adipisicing elit. Nostrum, porro! Illo
                        facere soluta molestiae repellat odio porro
                        id est tenetur nesciunt, ea, similique
                        consequuntur? Voluptate dolorum explicabo
                        quo quaerat deserunt?
                      </p>
                    </div>
                  </div>

                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">Harga</p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-price">Rp 80.000</p>
                    </div>
                  </div>

                  <div class="row text-left">
                    <div class="col-4">
                      <p class="merchandise-category">Ukuran</p>
                    </div>
                    <div class="col-1">
                      <p class="merchandise-category">:</p>
                    </div>
                    <div class="col-7">
                      <p class="merchandise-size">XS - XXL</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

</template>

这是我的风格:

.merchandise-item-wrapper {
  overflow: hidden;
  overflow-x: auto;
}

.merchandise-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

.merchandise-table td {
  padding: 0px 8px;
  width: 100%;
  min-width: 380px;
  max-width: 400px;
}

.item-store {
  transform: scale(0.75);
}

.item-store.active {
  transform: scale(1);
}

这些是我实现自动播放的方法:

methods: {
  itemSlider() {
    let autoScroller = document.getElementById("customWrapper");
    let item = autoScroller.getElementsByTagName("td");
    let multiplier = 0;
    let imgScaller = 0;
    let imgPointer = 0;
    setInterval(function() {
      console.log("cek start : ", multiplier);
      if (item[imgPointer + 1].classList != undefined) {
        autoScroller.style.transform = `translateX(${-380 * multiplier}px)`;
      }

      for (let i = 0; i < item.length; i++) {
        if (item[imgPointer + 1].classList != undefined && i == imgScaller) {
          imgPointer = i;
        }
      }

      item[imgPointer].classList.remove("active");
      if (imgPointer < item.length - 1) {
        item[imgPointer + 1].classList.add("active");
        console.log("cek pointer if : ", imgPointer);
      }

      if (multiplier < item.length - 1) {
        multiplier++;
        imgScaller++;
        console.log("cek update : ", multiplier);
      } else {
        console.log("last update : ", multiplier);
        item[imgPointer].classList.remove("active");
        multiplier = 0;
        imgScaller = 0;
        imgPointer = 0;
        item[imgPointer].classList.add("active");
      }
    }, 3000);
  }
},

mounted() {
  this.itemSlider();
}

我很困惑在点击最后一部分后找到一种循环我的卡片的方法，目前，我只能将它移回第一个位置。

Answer 1

终于我可以解决这个问题了，这个答案是给和我有同样问题的你的，
对于无限循环，您需要通过克隆要附加动态索引的元素来解决它(在我的情况下)，所以我调整我的代码直到看起来像这样

    itemSlider() {
      let autoScroller = document.getElementById("customWrapper");
      let item = autoScroller.getElementsByTagName("td");
      let multiplier = 0;
      let imgScaller = 0;
      setInterval(function() {
        if (item[imgScaller + 1].classList != undefined) {
          autoScroller.style.transform = `translateX(${-380 * multiplier}px)`;
        }

        if (imgScaller - 1 != -1 && imgScaller != 0) {
          let firstSlide = item[imgScaller - 1];
          let cloneFirst = firstSlide.cloneNode(true);
          autoScroller.appendChild(cloneFirst);
        }

        if (imgScaller) {
          item[imgScaller + 1].classList.add("active");
        }
        if (imgScaller - 1 != -1) {
          item[imgScaller].classList.remove("active");
          item[imgScaller - 1].classList.remove("active");
        }

        multiplier++;
        imgScaller++;
      }, 3000);
    }

但是如果你知道我只是想知道我的代码是否已经足够了，如果你看它的性能？因为我只追加它而不删除最旧的？，如果你能优化它会对我有很大帮助，谢谢