[Jquery]한 페이지에 같은 동작하는 Swiper가 여러개일때 처리

한 페이지에 같은 동작하는 여러개의 스와이퍼(swiper) 슬라이더를 넣어야할때 

 

새로운 new Swiper 변수명을 선언해도 동작은 하지만 같은동작을 반복하고 버튼마저 같은 방식이라면 무식한 방법이 되어버린다.

 

Swiper 갯수가 100개가 된다고하면 100개의 new Swiper 변수명을 선언해야 하고 그 이후에도 추가된다면 200개,300개의 변수명을 선언해야하기때문이다.

 

그래서 아래와 같이 처리할 수 있다.

 

<!-- 스와이퍼 -->
<div class="swiper-container my-swiper">
	<ul class="swiper-wrapper">
    	<li class="swiper-slide">
        	<img src="img.jpg" alt="이미지">
        </li>
        <li class="swiper-slide">
        	<img src="img.jpg" alt="이미지">
        </li>
        <li class="swiper-slide">
        	<img src="img.jpg" alt="이미지">
        </li>
    </ul>
    <button type="button" class="swiper-button-prev"></button>
    <button type="button" class="swiper-button-next"></button>
</div>
<!-- ..스와이퍼 -->

위와 같은 동작을 하는 스와이퍼 요소가 100개 있고 앞으로도 유지보수 과정에서 늘어 날 수 있단 것을 가정해보면 아래와 같이 스크립트 처리를 해주면 된다.

 

<script>
    $(function () {
            $(".my-swiper").each(function (index) {
                $(this).attr("id", `mySwiper-${index}`;
                let mySwiper = new Swiper(`#mySwiper-${index}`, {
                    slidesPerView: "auto",
                    spaceBetween: 10,
                    navigation: {
                        prevEl: $(`#mySwiper-${index} .swiper-button-prev`),
                        nextEl: $(`#mySwiper-${index} .swiper-button-next`),
                    },
                });
            });
    });
</script>

 

위의 100개 swiper가 있다면 index값에 맞춰 동적으로 id를 생성해준다.

100개의 swiper에는 각각 'mySwiper-0~100' 이라는 id를 가지게 된다. 

위와같이 처리하면 100개의 new Swiper변수명을 선언하지 않아도 같은 동작하는 100개의 swiper를 제어 할 수 있게된다.