Swiper 연동과 슬라이드 전환 이벤트

Swiper는 jQuery 없이 쓰는 모바일 터치 슬라이더입니다. 공식 패키지로 React, Vue, Angular와 붙일 수 있고, 이미지 갤러리·제품 슬라이드·뉴스 롤링처럼 터치 조작이 중요한 구간에 씁니다.

슬라이드가 바뀔 때 헤더 배경색 같은 주변 UI를 맞추려면, 초기화 옵션의 이벤트(예: slideChangeTransitionStart)에서 현재 슬라이드 인덱스를 읽고 해당 요소 스타일을 바꾸면 됩니다. 자동 재생(autoplay)·페이드(effect)·페이지네이션은 위 옵션표의 Swiper 열과 같이 설정합니다.

Swiper

Swiper는 하드웨어 가속 전환 효과와 네이티브에 가까운 동작을 제공하는 오픈소스 모바일 터치 슬라이더 라이브러리이다. JavaScript, React, Vue, Web Components를 지원하며 삼성, 나이키, 아디다스, BMW, 어도비 등 다수의 글로벌 기업 웹사이트에서 사용되고 있다.

사이트 바로가기