[Swiper] 라이브러리 포커스이동

<div id="popupList" class="popupWrap new">
	<ul class="swiper-wrapper">
	
		<li class="swiper-slide" >
			<a href="https:// ~" target="_blank">
				<img src="/resources/user/img/popup/pop_231116.png">
			</a>
		</li>
		
		<li class="swiper-slide" >
			<a href="" target="_blank">
				<img src="/resources/user/img/popup/pop_231103.png" >
			</a>
		</li>
		<li class="swiper-slide" >
			<a href="https://~" target="_blank">
				<img src="/resources/user/img/popup/pop_231103_02.png">
			</a>
		</li>
     </ul>
</div>

 

swiper 라이브러리를 사용해서 팝업이미지들이 자동으로 재생되고 있음 

키보드 tab을 눌렀을때 a링크에 포커스가 잡히면 해당 이미지가 화면에 나오도록 라이브러리와 스크립트 이용하기 .

var timer = 4000; //4000
var mainSwiper = new Swiper( "#popupList", {
	slidesPerView: 1,
	autoplay: {
		delay: timer,
		disableOnInteraction: true,
	},
	loop: true,
	allowTouchMove : true,
	effect: 'fade',
	fadeEffect: {
	    crossFade: true,
	},
	pagination: {
		el: ".swiper-pagination",
		loop: true,
		clickable: true,
	},
	navigation: {
		nextEl : '.btn.next',
		prevEl : '.btn.prev',
	},
	observer: true,
	observeParents: true,
	 
	  
	
});


$("#popupList .swiper-wrapper li a").focus(function () {
    console.log('포커스 바뀜');
    $("#popupList .swiper-wrapper li").not($(this).closest('li')).removeClass("swiper-slide-active");       
    $(this).closest('li').addClass("swiper-slide-active");
    // 현재 포커스된 li 엘리먼트의 index 가져오기
    var focusedIndex = $(this).closest('li').index();
    // Swiper를 현재 포커스된 li 엘리먼트로 이동
    mainSwiper.slideTo(focusedIndex);
});