[plugin] swiper 중복 사용

동일 클래스 swiper의 중복 사용 예시 캡처

tablet과 mobile 환경에서 슬라이더 플러그인 클래스는 동일한데 분리되어 보여야할 경우가 있다.

그럴 때 유용하게 쓰일수 있는 스크립트를 공유한다.

해당 슬라이더 개수를 파악하여 인덱스를 이용해 각각의 슬라이더에 자바스크립트로 아이디 값을 할당 후 스와이퍼를 동작 시킨다.

html

<div class="category-add-slider swiper-container show-mo">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<a href="javascript:;">
				<img src="../image/sample/top_banner.png" alt=""></a>
		</div>
		<div class="swiper-slide">
			<a href="javascript:;">
				<img src="../image/sample/top_banner.png" alt=""></a>
		</div>
		<div class="swiper-slide">
			<a href="javascript:;">
				<img src="../image/sample/top_banner.png" alt=""></a>
		</div>
	</div>
	<div class="category-add-pagination swiper-pagination"></div>
</div>
<!-- 태블릿 슬라이드 추가 -->
<div class="category-add-slider swiper-container show-ta">
	<div class="swiper-wrapper">
		<div class="swiper-slide">
			<a href="javascript:;">
				<img src="../image/sample/top_banner.png" alt=""></a>
		</div>
		<div class="swiper-slide">
			<a href="javascript:;">
				<img src="../image/sample/top_banner.png" alt=""></a>
		</div>
		<div class="swiper-slide">
			<a href="javascript:;">
				<img src="../image/sample/top_banner.png" alt=""></a>
		</div>
	</div>
	<div class="category-add-pagination swiper-pagination"></div>
</div>
<!-- // 태블릿 슬라이드 추가 END -->

 

javascript

$('.category-add-slider').each(function (i, v) {
  let sliderName = 'slider' + i;
  $('.category-add-slider')[i].id = sliderName;
  let sliderId = '#' + sliderName;
  let categoryAddSlider = new Swiper(sliderId, {
    loop: true,
    autoplay: true,
    speed: 1000,
    delay: 4000,
    slidesPerView: 1,
    pagination: {
      el: ".category-add-pagination",
      clickable: true,
    }
  });
});