[Swiper] 스와이퍼 슬라이드 넘김 시 이벤트

Swiper.js에서 슬라이드 넘어갈 때 event 및 조건문 추가하는 방법

 

on에 이벤트 속성 삽입 후 event 또는 조건문의 내용 넣기

var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    centeredSlides: true,   
    on: {
        slideChange : function() {
            // event
        },
    },
});

 

 

* Swiper Event List

 

init
슬라이드 쇼가 초기화될 때

slideChange
슬라이드가 변경될 때

slideChangeTransitionStart
슬라이드 변경 트랜지션 시작시

slideChangeTransitionEnd
슬라이드 변경 트랜지션 끝날 때

slideNextTransitionStart
다음 슬라이드로 이동할 때

slideNextTransitionEnd
다음 슬라이드로 이동한 후 트랜지션 끝날 때

slidePrevTransitionStart
이전 슬라이드로 이동할 때

slidePrevTransitionEnd
이전 슬라이드로 이동한 후 트랜지션 끝날 때

slideChangeTransitionStart
슬라이드 변경 트랜지션 시작시

slideChangeTransitionEnd
슬라이드 변경 트랜지션 끝날 때

slideReset
슬라이드를 초기화할 때

resize
슬라이드 쇼의 크기가 변경될 때

paginationRender
페이징(슬라이드 넘버링 등)이 렌더링될 때

 

 

 

*사용 예시 : 슬라이드에 삽입된 이미지 다크모드 시 gnb 컬러 변경하기

var mySwiper = new Swiper('.swiper-container', {
    slidesPerView: 'auto',
    centeredSlides: true,   
    on: {
    	// 슬라이드 이미지 다크모드 시 gnb 컬러 변경
		slideNextTransitionStart : function() {
			if ($('.swiper-slide-active').hasClass('type_dark')) {
				$('.gnb').addClass('type_dark');
			}else {
				$('.gnb').removeClass('type_dark');
			}
		},
		slidePrevTransitionStart : function() {
			if ($('.swiper-slide-active').hasClass('type_dark')) {
				$('.gnb').addClass('type_dark');
			}else {
				$('.gnb').removeClass('type_dark');
			}
		},
	}
});