Swiper 예제 - 슬라이드가 넘어갈 때 이벤트 호출

swiper는 다른 라이브러리보다 직관적이고 친절한 demo와 api를 제공하고 있다.

 

Swiper Demos

Swiper API

 

그 중 여러가지 이벤트 메서드를 지원하는데 activeIndexChange와 slideChange는 슬라이드가 바뀔 때마다 이벤트를 호출하는 메서드이다.

activeIndexChnage는 활성화된 인덱스가 바뀔 때마다 호출되고

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

어떤 메서드를 쓸 지는 본인 마음이다.

 

See the Pen swiper (1) by lpla (@lpla) on CodePen.

 

이 메서드는 realIndex 파라미터와 함께 쓰면 유용하다.

realIndex는 현재 활성화(active)된 슬라이드의 index를 반환한다.

비슷하게 activeIndex도 현재 활성화된 슬라이드의 index를 반환하는데 둘의 차이는 activeIndex는 loop에서 복제된 슬라이드까지 포함한다.

따라서 진짜 슬라이드의 index를 반환하기 위해서는 realIndex를 사용해야 한다.

See the Pen swiper event (2) by lpla (@lpla) on CodePen.

 

이것을 활용하면 swiper 외적인 요소까지 연동하여 컨트롤 할 수 있다.

 

See the Pen swiper event (3) by lpla (@lpla) on CodePen.