<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-1_component").forEach((component) => {
		if (component.hasAttribute("data-slider-1")) return;
		component.setAttribute("data-slider-1", "");
    
		const mainWrap = component.querySelector(".slider-1_main_wrap");
		const thumbWrap = component.querySelector(".slider-1_thumb_wrap");
		const slides = component.querySelectorAll(".slider-1_thumb_item");
		const btnNext = component.querySelector(".slider-1_btn_wrap.is-next");
		const btnPrev = component.querySelector(".slider-1_btn_wrap.is-prev");

		if (!mainWrap || !thumbWrap || slides.length === 0) return;

		const sliderSpeed = 600;

		const swiper1 = new Swiper(mainWrap, {
			slidesPerView: 1,
			speed: sliderSpeed,
			mousewheel: { forceToAxis: true, eventsTarget: component },
			keyboard: true,
			navigation: { nextEl: btnNext, prevEl: btnPrev },
		});

		const swiper2 = new Swiper(thumbWrap, {
			speed: sliderSpeed,
			allowTouchMove: false,
			followFinger: false,
			// mobile portrait
			slidesPerView: 1,
			slidesPerGroup: 1,
			breakpoints: {
				// mobile landscape
				480: { slidesPerView: 2, slidesPerGroup: 2 },
				// tablet
				768: { slidesPerView: 3, slidesPerGroup: 3 },
				// desktop
				992: { slidesPerView: 4, slidesPerGroup: 4 },
			},
		});

		function makeActive(index) {
			slides.forEach((s, i) => s.classList.toggle("is-active", i === index));
			swiper2?.slideTo(index, sliderSpeed);
		}
		makeActive(0);

		slides.forEach((slide, index) => {
			slide.addEventListener("click", () => {
				swiper1.slideTo(index, sliderSpeed);
				makeActive(index);
			});
		});

		swiper1.on("slideChange", () => makeActive(swiper1.activeIndex));
	});
});
</script>