Swiperjs in web component return duplicated items

Question

I'm creating a custom carousel web component with using Swiperjs as part of the element.

The quantity of items is dynamic, it is depend on the value that get from the web component attribute sliderBgImage and sliderCopyImage.

Then, it will loop thru the array and implementing the items with Swiper.js carousel library. Hope someone can advise on this, thank you!

index.html

    <div style="width:320px;height:480px;">
        <verticalsliderBgImage="banner1.png,banner2.png" sliderCopyImage="copy1.png,copy2.png" sliderlanding1="http://www.google.com" sliderlanding2="http://www.test.com" sliderlanding3="http://www.test.com" sliderlanding4="" sliderlanding5="" autoplay="true" speed="2000" pagingColor="3eff8a"></vertical>
    </div>
    <script src="vertical.js" type="module"></script>
    <script src="https://s0.2mdn.net/creatives/assets/4671853/swiper.min.js"></script>


</body>

Vertical.js

template.innerHTML = `
<link rel="stylesheet" href="./swiper.min.css"/><link rel="stylesheet" href="./vertical.css"/><div id="mainContainer"><div class="swiper-container"><div class="swiper-wrapper"></div><div class="swiper-pagination"></div></div></div>`;

class Vertical extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  }

  handleSliderClick = () => {
    let slides = this.shadowRoot.querySelectorAll(".swiper-slide");

    for (let i = 0; i < slides.length; i++) {
      const slide = slides[i];

      slide.addEventListener("click", () => {
        const getslide = slide.getAttribute("data");
        const landing = getslide.slice(-1);
        Enabler.exitOverride(getslide, this.getAttribute(landing));
      });
    }
  };

  setPaginateColor = () => {
    const activeBullet = this.shadowRoot.querySelector(
      ".swiper-pagination-bullet-active"
    );
    if (activeBullet) {
      activeBullet.style.backgroundColor = `#${this.getAttribute(
        "pagingColor"
      )}`;
    }
  };

  darkNav = () => {
    var slides = this.shadowRoot.querySelectorAll(".swiper-slide");
    var copies = this.shadowRoot.querySelectorAll(".copies");

    for (let i = 0, c = 0; i < slides.length, c < copies.length; i++, c++) {
      const slide = slides[i];
      const copy = copies[c];

      if (
        slide.classList.contains("swiper-slide-active") ||
        slide.classList.contains("swiper-slide-duplicate-active")
      ) {
        slide.classList.add("bubbleslide");
        this.setPaginateColor();
        setTimeout(() => {
          copy.classList.add("slide-top");
        }, 200);
      } else {
        slide.classList.remove("bubbleslide");
        copy.classList.remove("slide-top");
      }
    }
  };

  setSwiper = (ele) => {
    const setAutoplay = this.getAttribute("autoplay");
    const setSpeed = this.getAttribute("speed");

    var swiper = new Swiper(ele, {
      autoplay: {
        delay: setSpeed,
      },
      direction: "vertical",
      pagination: {
        el: this.shadowRoot.querySelector(".swiper-pagination"),
        clickable: true,
      },
      loop: true,
      on: {
        slideChangeTransitionStart: this.darkNav,
      },
    });

    this.setPaginateColor();

    if (setAutoplay === "true" || setAutoplay === "TRUE") {
      swiper.autoplay.start();
    } else {
      swiper.autoplay.stop();
    }

    this.handleSliderClick();

    setTimeout(() => {
      swiper.autoplay.stop();
    }, 30000);
  };


  static get observedAttributes() {
    return [
      "brandLogo",
      "sliderBgImage",
      "sliderCopyImage",
      "pagingColor",
      "autoplay",
      "speed",
    ];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    var bgImgs = this.getAttribute("sliderBgImage").split(",");
    var copyImgs = this.getAttribute("sliderCopyImage").split(",");
    var items = [];

    // clean up each item
    for (let i = 0; i < bgImgs.length; i++) {
      let val1 = bgImgs[i];
      let val2 = copyImgs[i];
      let obj = {
        bg: val1,
        tag: val2,
      };
      items.push(obj);
    }
   }

  connectedCallback() {
    var bgImgs = this.getAttribute("sliderBgImage").split(",");
    var copyImgs = this.getAttribute("sliderCopyImage").split(",");
    var items = [];

    // clean up each item
    for (let i = 0; i < bgImgs.length; i++) {
      let val1 = bgImgs[i];
      let val2 = copyImgs[i];
      let obj = {
        bg: val1,
        tag: val2,
      };
      items.push(obj);
    }

    let checkItem = null;
    const swiperContainer = this.shadowRoot.querySelector(".swiper-wrapper");
    const swiperMain = this.shadowRoot.querySelector(".swiper-container");

    items.map((v, k) => {
      let html = `<div class="swiper-slide slide${k + 1}" data="slide${
        k + 1
      }" style="background-image:url('${v.bg}')"><div class="copies copy${
        k + 1
      }" style="background-image:url('${v.tag}')"></div></div>`;
      checkItem++;
      return (swiperContainer.innerHTML += html);
    });

    let check = setInterval(() => {
      if (checkItem === items.length) {
        this.setSwiper(swiperMain);
        clearInterval(check);
      }
    }, 500);
  }

}

export default Vertical;