Elementor Loop Grid Custom Slider using Swiper

ele-loop-slider.html

<script>
  //Loop Posts Slider
	//NOTE:IF using custom code in Elementor Settings, this needs to be wrapped in window.addEventListener('load', ()=>{}) to ensure all Elementor scripts are loaded
	window.addEventListener('load',()=>{	
		const sContainer = document.querySelector(".your-class-name .elementor-widget-container");
		const sWrapper = document.querySelector(".your-class-name .elementor-loop-container");
		let sSlide = document.querySelectorAll('.e-loop-item');
		sContainer.classList.add("swiper-container");
		sWrapper.classList.add("swiper-wrapper");
		sSlide.forEach(slide=>{
			slide.classList.add('swiper-slide');
		});
		sContainer.insertAdjacentHTML('beforeend','<div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>');
	
		const swiperConfig = {
			spaceBetween:0,
			slidesPerView: 1,
			autoplay: true,
			breakpoints: {
				640: {
					slidesPerView: 1,
					spaceBetween: 0,
				},
				768: {
					slidesPerView: 1,
					spaceBetween: 0,
				},
				1024: {
					slidesPerView: 1,
					spaceBetween: 0,
				},
			},

			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				 type: 'bullets',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},
		}

		
		if ('undefined' === typeof Swiper) {
		const asyncSwiper = elementorFrontend.utils.swiper;
		new asyncSwiper(sContainer, swiperConfig).then((newSwiperInstance) => {
			mySwiper = newSwiperInstance;
		});
	} else {
		mySwiper = new Swiper(sContainer, swiperConfig);
	}
	});
</script>
<style>
.your-class-name .swiper-wrapper {
	display: flex !important;
    	flex-wrap: inherit;
}
/* To change the navigation arrow color replace this: fill='%23007aff'(only 007aff with your hex color) for prev & next*/
.your-class-name .swiper-button-next {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23007aff'/%3E%3C/svg%3E");
}
.your-class-name .swiper-button-prev {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23007aff'/%3E%3C/svg%3E");
}
	/*To change pagination bullets color*/
.your-class-name .swiper-pagination-bullet{
	background:#000;
}
	
	
</style>