swiper 두개 쓰기

ex) 메인페이지 3장 슬라이드 / 하단 컨텐츠 10장 슬라이드가 동시에 필요할 경우

" 기존swiper class들은 그대로 두고 swiper-container만 구별을 위한 class (ex. first-swiper, second-swiper)를 추가한다 "

<div class="swiper-container first-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
</div>

<div class="swiper-container second-swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
    </div>
</div>

 

script에서 swiper-container로 적용된 부분을 구별 class (ex. first-swiper, second-swiper)로 바꿔준다.

//first-swiper
<script>
     var firstSwiper = new Swiper('.first-swiper', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
</script>

//second-swiper
<script>
    var secondSwiper = new Swiper('.second-swiper', {
      slidesPerView: 1,
      spaceBetween: 10,
      // init: false,
      pagination: {
        el: '.swiper-pagination2',
        clickable: true,
      },
      breakpoints: {
        '@0.00': {
          slidesPerView: 1,
          spaceBetween: 10,
        },
        '@0.75': {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        '@1.00': {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        '@1.50': {
          slidesPerView: 4,
          spaceBetween: 50,
        },
      }
    });
</script>