[JQuery]갤러리 형태 썸네일 클릭시 해당 index로 팝업 형태 swiper의 index 같은 위치로 옮기기

아래와 같은 마크업 구조를 가진 갤러리형태 swiper 슬라이드와 팝업형태의 swiper 슬라이드가 있다.

<!-- 갤러리 형태 swiper -->
<div class="swiper-container" id="mySwiper">
	<ul class="swiper-wrapper">
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
    </ul>                      
</div>
<!-- ...갤러리 형태 swiper -->

<!-- 팝업형태 swiper -->
<div class="swiper-container" id="layerSwiper">
	<ul class="swiper-wrapper">
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
        <li class="swiper-slide"></li>
    </ul>                      
</div>
<!-- ...팝업형태 swiper -->

 

 

갤러리 형태 swiper 요소를 클릭시 팝업이 페이드 인이 되면서 클릭했던 갤러리형태의 swiper index로 팝업형태의 swiper도 자동으로 이동시키고자한다.

 

그럴땐 아래와 같이 JS를 작성하도록한다.

//갤러리 형태 swiper 옵션
const myGalImgSwiper = new Swiper("#mySwiper",{
	slidesPerView: 3 //갤러리 뷰 갯수
    spaceBetween: 20 //스와이퍼 요소 간 여백
});

//팝업 형태 swiper 옵션
const layerImgSwiper = new Swiper("#layerSwiper",{
	slidesPerView: 1, //팝업 뷰 갯수
});

// 갤러리 스와이퍼 요소 클릭시 팝업창 페이드인 and 클릭한 해당 index로 팝업형태도 이동
$("#mySwiper .swiper-slide").on("click",function(){
    //클릭한 갤러리 요소 index 선언
    const galIdx = $(this).index();
    
    //팝업형태 swiper에 slideTo()를 기입 하여 클릭한 요소 index와 같은 index로 가도록 표현
    layerImgSwiper.slideTo(galIdx);
});

 

 

갤러리형태의 swiper-slide 요소를 클릭시 해당 index를 const로 선언 해주고 slideTo()에 클릭한 index요소를 기입해주면 같은 인덱스로 이동하여 출력되는것을 확인할 수 있다.