<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
	document.querySelectorAll(".slider-3_component").forEach((wrap) => {
		if (component.hasAttribute("data-slider-3")) return;
		component.setAttribute("data-slider-3", "");

		const cmsWrap = wrap.querySelector(".slider-3_wrap");
		if (!cmsWrap) return;
    
		const swiper = new Swiper(cmsWrap, {
			slidesPerView: "auto",
			followFinger: true,
			freeMode: false,
			slideToClickedSlide: false,
			centeredSlides: false,
			autoHeight: false,
			speed: 600,
			loop: true,
			mousewheel: {
				forceToAxis: true,
			},
			effect: "coverflow",
			coverflowEffect: {
				rotate: 0,
				scale: 0.9,
				depth: 100,
				modifier: 1,
				slideShadows: false,
			},
			keyboard: {
				enabled: true,
				onlyInViewport: true,
			},
			navigation: {
				nextEl: wrap.querySelector(".slider-3_button.is-next"),
				prevEl: wrap.querySelector(".slider-3_button.is-prev"),
			},
			pagination: {
				el: wrap.querySelector(".slider-3_bullet_wrap"),
				bulletActiveClass: "is-active",
				bulletClass: "slider-3_bullet_item",
				bulletElement: "button",
				clickable: true,
			},
			slideActiveClass: "is-active",
			slideDuplicateActiveClass: "is-active",
		});
	});
});
</script>