[Swiper] 똑같은 스와이퍼 반복문으로 편하게 만들기

#swiper #script #스와이퍼여러개만들기

 

 

옵션은 다 똑같은데 스와이퍼 코드를 이렇게 작성했던 적이 있습니다.

지금은 배열을 사용해서 편하게 쓰고 있어서 정리합니다.

 

 

 

탭바 안에 똑같은 레이아웃의 스와이퍼가 들어있는 디자인이 많더군요.

그 때 스와이퍼를 스크립트를 하나씩 작성하는 것이 아닌, 배열/반복으로 한번에 만드는 방법입니다.

 

HTML

 <div class="bs-slide1 bs-slide">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
  </div>
 </div>

 <div class="bs-slide2 bs-slide">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="conbox">
        <div class="txtbox">
          <h3>
          Swiper
          </h3>
          <p>
          Swiper is~
          </p>
        </div>
      </div>
    </div>
  </div>
 </div>

 

*슬라이더는 원하는만큼 더 작성하셔도 됩니다.

 

 

SCRIPT

  var swiperClasses = [".bs-slide1", ".bs-slide2", ".bs-slide3", ".bs-slide4", ".bs-slide5"];
  swiperClasses.forEach(function(swiperClass) {
    new Swiper(swiperClass, {
      slidesPerView: 1.5,
      speed : 600,
      spaceBetween: 20,
      breakpoints: { 
      640: { 
        slidesPerView: 1.8,
      },
    }});
  });

 

swiperClasses에 반복적으로 입력할 swiper들의 클래스 혹은 아이디를 입력 해 주시고

스와이퍼 옵션을 new Swiper(swiperClass){ 이 부분에 작성 해 주시면 됩니다 }