상세 컨텐츠

본문 제목

[jQuery, Swiper] Swiper - activeIndex, slideChange 사용방법

FrontEnd/jQuery

by 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

 

관련글 더보기

댓글 영역