nolimits4web/swiper

어떤 프로젝트인가요?

핵심 기능

• 01설정 가능한 1:1 터치 이동을 지원하는 터치 우선 슬라이더입니다.
• 02화면에 표시할 슬라이드 수, 그룹 수, 간격을 제어할 수 있는 Flexbox 슬라이드 레이아웃입니다.
• 03페이지네이션, 탐색 화살표, 스크롤바가 기본 제공됩니다.
• 04페이드, 플립, 3D 큐브, 3D 커버플로 전환 효과를 제공합니다.
• 05이미지가 많거나 규모가 큰 캐러셀을 위한 지연 로딩과 가상 슬라이드를 지원합니다.
• 06TypeScript 타입을 제공하는 트리 셰이킹 가능 모듈이며 jQuery에 의존하지 않습니다.

활용 사례

• 모바일 친화적인 웹사이트에 이미지 갤러리나 제품 캐러셀을 구현할 때
• 모바일 웹 앱에 스와이프할 수 있는 온보딩 또는 배너 섹션을 추가할 때
• 순수 CSS 설정으로 여러 행 또는 열로 구성된 슬라이드 레이아웃을 만들 때
• 썸네일 슬라이더와 메인 슬라이더를 연결해 서로 제어하도록 만들 때

빠른 시작

1. 1

   npm에서 Swiper를 설치합니다

   npm install swiper
2. 2

   개발 버전을 빌드합니다(clone 후 저장소 루트에서 실행).

   npm install && npm run build
3. 3

   playground 폴더에서 Core 데모를 실행합니다

   npm run core

사용 전 알아둘 점

• !모든 플랫폼과 호환되는 것은 아닙니다. 최신 브라우저와 모바일 앱만 지원합니다.

토픽

자주 묻는 질문

swiper은(는) 무엇인가요?

모바일 웹사이트와 앱을 위한 무료 터치 우선 JavaScript 슬라이더로, 하드웨어 가속 전환 효과를 지원하며 jQuery에 의존하지 않습니다. Swiper는 모바일 웹사이트와 모바일 웹 앱, 네이티브 또는 하이브리드 앱에서 터치 인터랙션에 초점을 맞춘 JavaScript 슬라이더 라이브러리입니다. Flexbox 기반 슬라이드 레이아웃을 사용하므로 CSS와 한 화면에 표시할 슬라이드 수, 그룹당 슬라이드 수, 간격 같은 초기화 매개변수로 슬라이드 크기와 그리드를 제어할 수 있습니다.

swiper은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

swiper은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

swiper은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. swiper의 마지막 커밋은 2026년 10월 16일입니다.

swiper은(는) 어디에 사용할 수 있나요?

모바일 친화적인 웹사이트에 이미지 갤러리나 제품 캐러셀을 구현할 때 모바일 웹 앱에 스와이프할 수 있는 온보딩 또는 배너 섹션을 추가할 때 순수 CSS 설정으로 여러 행 또는 열로 구성된 슬라이드 레이아웃을 만들 때 썸네일 슬라이더와 메인 슬라이더를 연결해 서로 제어하도록 만들 때

swiper는 어떻게 설치하나요?

npm에서 Swiper를 설치합니다: npm install swiper 개발 버전을 빌드합니다(clone 후 저장소 루트에서 실행).: npm install && npm run build playground 폴더에서 Core 데모를 실행합니다: npm run core

swiper은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/nolimits4web/swiper