[javaScript] swiper for auto play on tab menu

swiper 플러그인을 탭에 삽입했는데

탭이 바뀌면 스와이퍼가 작동하지 않는 이슈 발생

 

구글링하여 아래 코드로 해결 !

 

// swiper for auto play on tab menu
document.addEventListener('DOMContentLoaded', function () {
	let tabSliders = document.querySelectorAll('.my_swiper');

	tabSliders.forEach(function (slider, index) {
	let sliderId = index + 1;
	let mySwiper = new Swiper(slider, {
		observer: true,
		observeParents: true,
		slidesPerView: 1,
		spaceBetween: 20,
		centeredSlides: true, 
		speed: 2000,
		autoplay: {
		delay: 2000,
		disableOnInteraction: false,
		pauseOnMouseEnter: true,
	},
		pagination: {
		el: ".swiper_pagination",
		type: "bullets",
		clickable: true,
	},
	});
});

	document.querySelectorAll('.tab').forEach(function (tab) {
		tab.addEventListener('click', function () {
			document.querySelector('.tab.active').classList.remove('active');
			this.classList.add('active');
			var targetSliderId = this.getAttribute('data-tab');
			tabSliders.forEach(function (slider) {
				slider.style.display = slider.getAttribute('data-slider') === targetSliderId ? 'block' : 'none';
				slider.swiper.update();
			});
		});
	});
});

 

음 근데 스와이퍼 무한 루프가 돌지 않는다..