슬라이드가 넘어갈 때 이벤트 호출하기(slideChange)

HTML

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 01</div>
    <div class="swiper-slide">Slide 02</div>
    <div class="swiper-slide">Slide 03</div>
  </div>
</div>

<div class="container">
  <div class="box active"><img src="./img/ex.jpg" /></div>
  <div class="box"><img src="./img/ex.jpg" /></div>
  <div class="box"><img src="./img/ex.jpg" /></div>
</div>

swiper 영역과 swiper가 넘어갈 때 마다 조작될 영역을 마크업한다.

이 때, 조작될 영역은 swiper 영역에 있어도 되고 바깥에 있어도 상관없다.

script

var swiper = new Swiper('.mySwiper', {
  on: {
    slideChange: function(){
      $('.box').removeClass('active');
      $('.box').eq(this.realIndex).addClass('active');
    },
  },
});

slideChange는 활성화 된 슬라이드(swiper-slide-active)가 바뀔 때마다 호출된다.

realIndex는 활성화 된 슬라이드의 index번호를 반환한다.

이 둘을 사용하면 swiper의 외적 요소까지 컨트롤 할 수 있다.

 

참고사이트

https://lpla.tistory.com/118