시작 | 문서 | 시민
스 와이퍼
Swiper- 하드웨어 가속화 된 전환과 놀라운 기본 동작이있는 무료 및 가장 현대적인 모바일 터치 슬라이더입니다. 모바일 웹 사이트, 모바일 웹 앱 및 모바일 네이티브/하이브리드 앱에서 사용됩니다.
Swiper는 모든 플랫폼과 호환되는 것은 아니며 최신 앱/플랫폼에만 초점을 맞춘 최신 터치 슬라이더입니다. 최상의 경험과 단순성을 제공합니다.
스폰서
특징
- Tree Shakeable : 사용하는 모듈 만 앱 번들로 가져옵니다.
- 모바일 친화적 : 모바일 웹 사이트, 모바일 웹 앱 및 모바일 기본/하이브리드 앱에서 사용되도록 의도됩니다.
- 라이브러리 Agnostic : Swiper에는 jQuery와 같은 JavaScript 라이브러리가 필요하지 않으므로 스위퍼가 훨씬 작고 빠릅니다. jQuery, Zepto, JQuery Mobile 등과 같은 라이브러리에서 안전하게 사용할 수 있습니다.
- 1 : 1 터치 이동 : 기본적으로 스위퍼는 1 : 1 터치 이동 상호 작용을 제공하지만이 비율은 스위퍼 설정을 통해 구성 할 수 있습니다.
- 돌연변이 관찰자 : Swiper는 돌연변이 관찰자를 가능하게하는 옵션이 있으며,이 기능 스위퍼를 사용하면 DOM을 동적으로 변경하거나 스위퍼 스타일 자체로 필요한 모든 필요한 매개 변수를 자동으로 재 계산하고 다시 계산합니다.
- Rich API : Swiper는 매우 풍부한 API와 함께 제공됩니다. 자체이 페이지 매김, 내비게이션 버튼, 시차 효과 등을 생성 할 수 있습니다.
- RTL : Swiper는 올바른 레이아웃으로 100% RTL 지원을 제공하는 유일한 슬라이더입니다.
- 멀티 행 슬라이드 레이아웃 : 스위퍼는 열당 몇 개의 슬라이드가있는 여러 행 슬라이드 레이아웃을 허용합니다.
- 전환 효과 : 페이드, 플립, 3D 큐브, 3D 커버 플로우.
- 양방향 컨트롤 : 스위퍼는 다른 많은 스 와이퍼의 컨트롤러로 사용될 수 있으며 동시에 제어 할 수도 있습니다.
- 전체 내비게이션 제어 : 스위퍼에는 Pagination, Navigation Arrows 및 Scrollbar와 같은 모든 필요한 내장 내비게이션 요소가 제공됩니다.
- Flexbox 레이아웃 : 스 와이퍼는 슬라이드 레이아웃에 현대식 Flexbox 레이아웃을 사용하여 크기의 크기로 많은 문제와 시간을 해결합니다. 이러한 레이아웃을 사용하면 순수한 CSS를 사용하여 슬라이드 그리드를 구성 할 수 있습니다.
- 대부분의 유연한 슬라이드 레이아웃 그리드 : Swiper는 초기화에 대한 많은 매개 변수가있어 최대한 유연하게 만들 수 있습니다. 보기 당 슬라이드, 열 당, 그룹당 그룹당, 슬라이드 사이의 공간 등을 제어 할 수 있습니다.
- 이미지 게으른 로딩 : 스위퍼 게으른 로딩은 사용자가 스 와이프 할 때까지 비활성/보이지 않는 슬라이드의 이미지 로딩 지연 지연입니다. 이러한 기능은 페이지를 더 빠르게로드하고 스위퍼 성능을 향상시킬 수 있습니다.
- 가상 슬라이드 : Swiper에는 슬라이드가 많거나 내용이 많은/이미지가 많은 슬라이드가 많을 때 가상 슬라이드 기능이 제공되므로 DOM에서 필요한 양의 슬라이드 만 유지할 수 있습니다.
- 루프 모드
- 자동 플레이
- 키보드 제어
- Mousewheel 제어
- 중첩 슬라이더
- 역사 내비게이션
- 해시 내비게이션
- 브레이크 포인트 구성
- 접근성 (A11Y)
- 그리고 더 많은 ...
지역 사회
스 와이퍼 커뮤니티는 Github 토론에서 찾을 수 있습니다.
당사의 행동 강령은 모든 스위퍼 커뮤니티 채널에 적용됩니다.
Dist / Build
프로덕션 사용 파일 (JS 및 CSS)에는 dist/
Folder에서만 가장 안정적인 버전이 있습니다.
개발 구축
Repo의 루트에 모든 종속성을 설치하십시오.
스 와이퍼의 개발 버전을 구축하십시오.
결과는 dist/
Folder에서 사용할 수 있습니다.
실행 데모 :
./playground
폴더에 위치한 모든 데모. Core (HTML, JS), React, VUE 버전이 있습니다. 데모를 열려면 실행 :
- 코어 :
npm run core
- 반응 :
npm run react
- vue :
npm run vue
생산 빌드
프로덕션 버전은 dist/
Folder에서 사용할 수 있습니다.
기여
모든 변경 사항은 src/
파일에만 최선을 다해야합니다. 문제를 열기 전에 기고 가이드 라인을 검토하십시오.
주요 로드맵 기능
- 최상위 기능 요청 (반응을 사용하여 자신의 투표 추가)
- 최고의 버그? (반응을 사용하여 자신의 투표를 추가하십시오)
기고자
코드 기여자
이 프로젝트는 기부 한 모든 사람들 덕분에 존재합니다. [기여하다].
재무 기여자
재정적 기고자가되어 지역 사회를 유지하도록 도와줍니다. [기여하다]