Swiper if window is resized to a mobile only

Add the code block at the Footer on select page.
				
					<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
jQuery(function ($) {
   var init = false;

   function swiperCard() {
      if (window.innerWidth <= 767) {
         // Slider main container
            $("#service-swiper .elementor-widget-wrap").addClass("swiper");
         // Additional required wrapper
            $("#service-swiper .elementor-widget-wrap").wrapInner("<div class='swiper-wrapper'></div>");
         // Required swiper slide item
            $(".service-item").addClass("swiper-slide");
         // Navigation buttons
            $("#service-swiper .elementor-widget-wrap").append("<div class='swiper-button swiper-button-next'></div><div class='swiper-button swiper-button-prev'></div>");
         if (!init) {
            init = true;
            swiper = new Swiper(".swiper", {
               slidesPerView: 1,
               spaceBetween: 25,
               centeredSlides: true,
               navigation: {
                  nextEl: ".swiper-button-next",
                  prevEl: ".swiper-button-prev",
               },
            });
         }
      } else if (init) {
         swiper.destroy();
         init = false;
      }
   }
   // resize function
   swiperCard();
   window.addEventListener("resize", swiperCard);
   // refresh the page when the user resizes
   // $(window).bind('resize',function(){
   //    window.location.href = window.location.href;
   // });
});
</script>