How to loop Carousel made using table in JavaScript with Vue.js

Question

I tried to make a custom carousel using table, but I got quite confused as how to make my carousel loop after hitting the last tag (in this case the last tag means last of td element). Currently I already succeeded to make it autoplay, but I'm confused as how to make it loop when autoplay reaches the last item.

For your information I'm using Vue.js to make this, and this is the Sandbox if you want to try it

This is my template:

<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>

This is my style:

.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);
}

And these are my methods to achieve the autoplay:

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();
}

I am quite confused to find a way for looping my card after hitting the last section, currently, I can only move it back to the first position.

Rakish Frisky · Accepted Answer · 2020-08-09 10:42:18Z

Finally I can solve this problem, this answer is for you who get the same problem with me,

For Infinite loop, you need to solve it by clone the element you want to append with a dynamic index (in my case), so I tweak my code until looks like this

    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);
    }

But if you know how I just wonder is my code is already enough if you see it by performance? since I only append it without deleting the oldest one?, if you can optimize it it will help me a lot, thankyou

Collectives™ on Stack Overflow

How to loop Carousel made using table in JavaScript with Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related