javascript - Reinit new slider swiper.js

Question

I have page with dynamic numbers of sliders swiper.js, and there is button, what adding new slider from ajax by text/html. But when i adding or cloning new slider, how i can reinit this sliders? Im trying different, but have no idia how to do that/

if (document.querySelector(".project")) {
  let prOption = {
    spaceBetween: 0,
    slidesPerView: 2,
    hashNavigation: true,
    pagination: {
      el: "#vet" + v + " .project__pager",
      clickable: true,
    },
    navigation: {
      nextEl: "#vet" + v + " .project__nav-next",
      prevEl: "#vet" + v + " .project__nav-prev",
    },
    breakpoints: {
      0: {
        slidesPerView: 1,
        spaceBetween: 12,
      },
      568: {
        slidesPerView: 2,
        spaceBetween: 24,
      },
    },
  };

  let list_slider = document.querySelectorAll(".project__slider");
  let v = 0;
  list_slider.forEach((el) => {
    el.setAttribute("id", "vet" + v);
    let slider = new defslider("#vet" + v, prOption);
    v++;
  });

  // demo reinit
  document.querySelector(".demo-add").addEventListener("click", () => {
    let listps = document.querySelectorAll(".project");
    let lastSlider = listps[listps.length - 1];

    let fs = document.importNode(lastSlider, true);
    document.querySelector(".project-list").appendChild(fs);
  });

question from:https://stackoverflow.com/questions/66049965/reinit-new-slider-swiper-js

Answer 1

Waitting for answers