[Swiper] 한 페이지에 swiper 여러개 일 때

한 페이지에 여러개의 swiper 슬라이더를 넣어야 할 때.

 

new Swiper를 다른 변수로 반복해서 선언하면 되긴 하지만, 그렇게되면 코드가 너무 지저분해진다.

아래처럼 컨트롤러들에 각각 다른 클래스 명을 주고

각각 슬라이더 컨트롤러로 지정해쥬면 된다.

 

작업한 소스 참고!

 

        </li>
      </ul>
      <div class="swiper-pagination"></div>
    </div>
    <div class="swiper-button-prev"><i class="icon-angle3-left"></i></div>
    <div class="swiper-button-next"><i class="icon-angle3-right"></i></div>
  </div>
  <div class="swiper-area">
    <div class="swiper-container">
      <ul class="swiper-wrapper">
        <li class="swiper-slide">
          <img src="https://source.unsplash.com/collection/11" style="width:300px"
            alt="">
        </li>
        <li class="swiper-slide">
          <img src="https://source.unsplash.com/collection/12" style="width:300px"
            alt="">
        </li>
        <li class="swiper-slide">
          <img src="https://source.unsplash.com/collection/13" style="width:300px"
            alt="">
        </li>
        <li class="swiper-slide">
          <img src="https://source.unsplash.com/collection/14" style="width:300px"
            alt="">
        </li>
        <li class="swiper-slide">
          <img
            src="https://source.unsplash.com/collection/15" style="width:300px" alt="">
        </li>
      </ul>
      <div class="swiper-pagination"></div>
    </div>
    <div class="swiper-button-prev"><i class="icon-angle3-left"></i></div>
    <div class="swiper-button-next"><i class="icon-angle3-right"></i></div>
  </div>  
  <script type="text/javascript">
	$(document).ready(function () {
		// multi slider
		var $slider = $('.swiper-area');
		$slider.find('.swiper-container').each(function(i){
			$(this).find(".swiper-pagination").addClass("type"+i);
			$(this).siblings("[class*='swiper-button']").addClass("type"+i);
			var slider  = new Swiper($(this), {
				slidesPerView: 1,
				loop: true,
				observer: true,
				observeParents: true,
				autoplay: {
					delay: 5000,
					disableOnInteraction: false
				},
				pagination: {
					el: $slider.find('.swiper-pagination.type'+i),
					type: 'bullets'
				},
				navigation: {
					nextEl: $slider.find('.swiper-button-next.type'+i),
					prevEl: $slider.find('.swiper-button-prev.type'+i)
				}
			});
		});
	});
  </script>
</body>
</html>