FrontEnd/jQuery
[jQuery, Swiper] Swiper - activeIndex, slideChange 사용방법
SangHoonE
2022. 7. 10. 13:00
안녕하세요 상훈입니다.
jQuery - Swiper 를 사용하는데, activeIndex가 뭐지? slideChange는 어떻게 사용하는것이지? 라는 의문이 들어 찾아보고 메모합니다.
일단 기본적으로 적용시킨것들은 이미 하셨다고 생각하고 넘어가도록 하겠습니다.
1. activeIndex
var swiperExample = new Swiper(".swiper-container", {
...
});
이런 swiper가 있을 때, activeIndex는 간단하게 얻을 수 있습니다.
const swiperIndex = swiperExample.activeIndex
이렇게하면 현재 활성화되어있는 swiper의 번호를 얻을 수 있습니다.
2.slideChange
슬라이드가 변할 때 특정 동작을 실행합니다.
var swiperIndex;
var swiperExample = new Swiper(".swiper-container", {
...
on: {
slideChnage: function () {
alert(this.realIndex);
}
}
});
slideChange 가 동작할 때마다 alert이 출력될 것 입니다.
이상입니다.
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
반응형