swiper는 많이 사용하기도 하고 유용하기도 한 라이브러리라 생각한다.
swiper에 대해 공부하던 도중 추가 이벤트를 할 수 있는 옵션인 on을 알게 되었고
간단하게 swiper .on옵션에 들어갈 이벤트들을 정리하려고 한다.
SWIPER ON OPTION
Swiper 라이브러리의 on 옵션은 이벤트 핸들러를 등록하기 위해 사용된다. 이벤트 핸들러는 Swiper 컴포넌트의 다양한 상황에서 발생하는 이벤트에 대한 처리를 정의할 때 유용하며, on 옵션을 사용하여 이벤트 핸들러를 등록할 수 있고, 해당 이벤트가 발생했을 때 실행할 동작을 지정할 수 있다.
사용 예시
navigation:{
prevEl:'.prev-btn',
nextEl:'.next-btn',
},
on:{ 👈 ///
✅slideChange: function() {
if (this.realIndex == 0 && this.realIndex == 7) {
swiperPrev.addClass('swiper-button-disabled');
startNum = false;
} else {
swiperPrev.removeClass('swiper-button-disabled');
}
},
✅reachEnd: function() {
swiperNext.addClass('swiper-button-disabled');
}👈 화살표로 표시된 곳 처럼 스와이퍼 기본 설정을 마친 후 이벤트를 주고 싶으면
on: { }을 사용하여 그 안에 이벤트를 할당해 적용한다.
✅ 표시와 같이 이벤트는 ,를 사용하여 중복적으로 넣을 수 있다.
on 옵션 이벤트 정리📝
init
슬라이드 쇼가 초기화될 때 발생합니다.
slideChange
슬라이드가 변경될 때 발생합니다. 슬라이드 전환 시 어떤 동작을 수행하고자 할 때 사용합니다
slideChangeTransitionStart
슬라이드 전환 트랜지션이 시작되기 전에 발생합니다.
slideChangeTransitionEnd
슬라이드 전환 트랜지션이 완료된 후에 발생합니다.
slideNextTransitionStart
다음 슬라이드로 전환되기 전에 발생합니다.
slideNextTransitionEnd
다음 슬라이드로 전환 트랜지션이 완료된 후에 발생합니다.
slidePrevTransitionStart
이전 슬라이드로 이동할 때 발생합니다.
slidePrevTransitionEnd
이전 슬라이드로 이동한 후 트랜지션 끝날 때 발생합니다.
slideReset
슬라이드를 초기화할 때 발생합니다.
activeIndexChange
현재 활성 슬라이드의 인덱스가 변경될 때 발생합니다. 특정 슬라이드가 활성화되었을 때 어떤 작업을 할 때 사용합니다.
reachEnd
슬라이드가 끝에 도달했을 때 발생합니다. 무한 루프가 활성화된 경우, 슬라이드가 끝에 도달했을 때의 동작을 처리하기 위해 사용될 수 있습니다.
reachBeginning
슬라이드가 처음에 도달했을 때 발생합니다. 무한 루프가 활성화된 경우, 슬라이드가 처음에 도달했을 때의 동작을 처리하기 위해 사용될 수 있습니다.
transitionStart
슬라이드 전환 트랜지션이 시작될 때 발생합니다. (모든 슬라이드 전환에 대한 이벤트)
transitionEnd
슬라이드 전환 트랜지션이 완료된 후에 발생합니다. (모든 슬라이드 전환에 대한 이벤트)
swiperCreated
Swiper 컴포넌트가 생성되었을 때 발생합니다. 초기화 작업이나 설정 변경 등을 수행할 때 사용할 수 있습니다.
resize
슬라이드 쇼의 크기가 변경될 때 발생합니다.
paginationRender
페이징(슬라이드 넘버링 등)이 렌더링될 때 발생합니다.
scrollbarDragMove
스크롤바 드래그 이동 중일 때 발생합니다.
scrollbarDragEnd
스크롤바 드래그 종료시 발생합니다.
fromEdge
슬라이드가 시작이나 끝에서 스크롤 될 때 발생합니다.
on 옵션을 사용하여 이벤트 핸들러를 등록하면 Swiper
컴포넌트의 다양한 이벤트에 대한 반응을 정의하여 더 유연하고 상호작용적인 슬라이드 쇼나 슬라이드 컴포넌트를 개발할 수 있을것이다!
