window.addEventListener('load', function(){
	// Thumb Swiper
	const thumbSlide = new Swiper('.bbs-sub-swiper', {
		freeMode: true,
		slidesPerView: 3,
		spaceBetween: 4,
		watchSlidesProgress: true,
		watchSlidesVisibility: true,
		allowTouchMove: false,
		breakpoints: {
			769: {
				slidesPerView: 5,
				spaceBetween: 10,
			}
		}
	})

	// Main Swiper
	const mainSlide = new Swiper('.bbs-main-swiper', {
		slidesPerView: 'auto',
		allowTouchMove: false,
		watchSlidesProgress: true,
		watchSlidesVisibility: true,
		roundLengths: false,
		navigation: {  
			nextEl: '.bbs-slide .next',  
			prevEl: '.bbs-slide .prev',  
		},
		pagination: {
			el: ".bbs-sub-swiper .pagination",
			type: "progressbar"
		},
		keyboard: {
      enabled: true,
    },
    thumbs: {
      swiper: thumbSlide
    },
	})

	// Thumb Click
	thumbSlide.on('click', function (swiper) {
		const clickedIndex = swiper.clickedIndex;
		if (typeof clickedIndex !== 'undefined') {
			const visibleCount = thumbSlide.params.slidesPerView;
			const targetIndex = clickedIndex - Math.floor(visibleCount / 2);

			thumbSlide.slideTo(targetIndex < 0 ? 0 : targetIndex);
		}
	});


}, false);