[javascript] swiper slide 2개 연동하여 제어하기

슬라이드를 구현할 때 공수를 줄여주는 매우 고마운 swiper!!

사진 갤러리(?) 와 같이 2개의 슬라이더가 같이 동작하도록 구현해야 할 때가 있는데요,

그런 경우를 위해 아래 방법으로 swiper 2개 혹은 n개를 연동하여 A슬라이더와 B슬라이더가

서로를 제어하도록 구현하시면 되겠습니다!!

 

HTML  야무지게 작성하고,

<div class="A_swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">A-1</div>
        <div class="swiper-slide">A-2</div>
        <div class="swiper-slide">A-3</div>
        <div class="swiper-slide">A-4</div>
        <div class="swiper-slide">A-5</div>
        <div class="swiper-slide">A-6</div>
      </div>
      <div class="A_nav">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
</div>

<div class="B_swiper">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">B-1</div>
        <div class="swiper-slide">B-2</div>
        <div class="swiper-slide">B-3</div>
        <div class="swiper-slide">B-4</div>
        <div class="swiper-slide">B-5</div>
        <div class="swiper-slide">B-6</div>
      </div>
      <div class="B_nav">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
</div>

css 필요한 거 쏙쏙 넣고 (swiper.css 필수!)

.swiper-container {
  width: 600px;
  text-align: center;
}

.swiper-container .swiper-wrapper {
  display:flex;
}

.swiper-container .swiper-slide {
  flex-shrink:0;
  width: 100%;
  background:#e9e9e9;
  aspect-ratio:16/9;
  box-sizing:border-box;
}
.swiper-container .swiper-slide.swiper-slide-active{border: 1px solid green;}

.B_swiper{margin-top:20px;}
.B_swiper .swiper-container

// 각 슬라이드 속성 적용
var A_Swiper = new Swiper('.A_swiper .swiper-container', {
  centeredSlides:true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});

// 각 슬라이드 속성 적용
var B_Swiper = new Swiper('.B_swiper .swiper-container', {
  centeredSlides:true,
  slidesPerView: 3,
  spaceBetween: 15,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },
});

// 연동과 제어
A_Swiper.controller.control = B_Swiper;
B_Swiper.controller.control = A_Swiper;

완성 되었습니다!!ㅎㅎㅎㅎ

 

controller 파라미터를 이용하면 아주 간단하게 연동됩니다.

각 슬라이드의 slidePevView(보여지는 슬라이드)의 수가 동일하던 동일하지 않던 연동과 제어에는 문제 없습니다!!

---

See the Pen Untitled by Younjung Jeong (@jojv) on CodePen.

---

 

알아두면 매우 유용할 거 같은 swiper 연동!! 이상입니다.

 

글 읽어주셔서 감사합니다!

 

참고 : https://swiperjs.com/swiper-api#controller