• Set your page wrapper to overflow: clip; to prevent any unwanted horizontal scroll

<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-2_component").forEach((component) => {
		if (component.hasAttribute("data-slider-2")) return;
		component.setAttribute("data-slider-2", "");
    
		const sliderElement = component.querySelector(".slider-2_wrap");
		if (!sliderElement) return;

		const swiper = new Swiper(sliderElement, {
			slidesPerView: "auto",
			followFinger: true,
			freeMode: false,
			slideToClickedSlide: false,
			centeredSlides: false,
			autoHeight: false,
			speed: 600,
			mousewheel: { forceToAxis: true },
			keyboard: { enabled: true, onlyInViewport: true },
			navigation: {
				nextEl: component.querySelector(".slider-2_button.is-next"),
				prevEl: component.querySelector(".slider-2_button.is-prev"),
			},
			pagination: {
				el: component.querySelector(".slider-2_bullet_wrap"),
				bulletActiveClass: "is-active",
				bulletClass: "slider-2_bullet_item",
				bulletElement: "button",
				clickable: true,
			},
			scrollbar: {
				el: component.querySelector(".slider-2_draggable_wrap"),
				draggable: true,
				dragClass: "slider-2_draggable_handle",
				snapOnRelease: true,
			},
			slideActiveClass: "is-active",
			slideDuplicateActiveClass: "is-active",
		});
	});
});
</script>