반응형
스와이퍼 플러그인
스와이퍼 플러그인은 터치 슬라이드 플러그인입니다. 아래에서 다운로드 받을 수 있습니다.
http://www.idangero.us/swiper
http://www.idangero.us/swiper/demos/
구조
swiper-container —
swiper-wrapper—
swiper-slide—
소스
javascript
|
1
2
3
|
new Swiper( '.swiper-container', {
// 옵션
});
|
cs |
옵션
autoHeight : true — 자동높이조절
autoplay — 자동 슬라이드 설정
breakpoints — 반응형 설정
centeredSlide : true — 슬라이드가 가운데로 배치
freeMode : false — 슬라이드 넘길 때 위치 고정 여부
loop : true — 슬라이드 반복
navigation {} — 네비게이션
pagination — 페이징
slidesPerView : 'auto' — 한 슬라이드에 보여줄 개수
spaceBetween : — 슬라이드 사이 여백
slideOffsetBefore : number — 슬라이드 시작 부분 여백
slideOffsetAfter : number — 슬라이드 끝 부분 여백
메소드
.slideTo() — 해당 슬라이드로 이동
.slidePrev() — 이전 슬라이드로 이동
.slideNext() — 다음 슬라이드로 이동
.destroy() — 슬라이드 제거
관련포스트
반응형
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| Javascript | jQuery 유용한 플러그인과 라이브러리 소개 (53) | 2024.03.25 |
|---|---|
| Javascript | jQuery UI 소개와 사용방법 (34) | 2024.03.22 |
| 파일업로드 dropzone.js 으로 손쉽게 구현하기 (84) | 2024.03.20 |
| JavaScript | 클릭 시 복사 버튼 만들기 (clipboard.js) (34) | 2023.09.30 |
| 코드이그나이터 | 데이터베이스 (0) | 2021.01.30 |
| 코드이그나이터 | 라이브러리 (0) | 2021.01.29 |
| 코드이그나이터 | index.php 제거 (0) | 2021.01.26 |
| CSS | 6-2. 레이아웃 Grid (0) | 2021.01.25 |
댓글