Make Slider out of anything for Elementor WordPres

script.html

<div class="swiper mySwiper">
  <div class="swiper-wrapper" id="swiper-wrapper1"></div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

<style>
  .swiper-pagination {
    width: 100%;
  }
  .swiper {
    overflow: hidden;
  }
  .swiper-pagination-bullet {
    margin: 5px 5px;
  }
</style>

<script>
  function swiperBuild(wrapper, slides) {
    //   Store the container widget with swiper-slide class in a object
    var allSlides = Array.from(document.getElementsByClassName(slides));

    // store the swiper wrapper in sliderWrap constant
    const sliderWrap = document.getElementById(wrapper);

    // append the slides to sliderWrap
    allSlides.forEach((item) => {
      sliderWrap.append(item);
    });
  }

  document.addEventListener("DOMContentLoaded", swiperBuild("swiper-wrapper1", "swiper-slide"));

</script>

<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
  var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
      768: {
        slidesPerView: 2,
        spaceBetween: 40,
      },
      1024: {
        slidesPerView: 3,
        spaceBetween: 50,
      },
    },
  });
</script>