티스토리 뷰
carousel
버튼 클릭, 네비게이션 클릭, 스와이프 모션을 이용해 조종할 수 있는 캐러셀입니다.
플레이/정지 버튼을 이용하여 자동으로 슬라이드를 보여줄 수 있습니다.
1. Component
- .carousel-container[data-num] : 캐러셀을 포함하는 컨테이너
- .carousel-prev : 이전 슬라이드 선택 버튼
- .carousel-next : 다음 슬라이드 선택 버튼
- .carousel-nav-wrap : 슬라이드 네비게이션 컨테이너
- .carousel-autoplay : 슬라이드 자동재생 토글 버튼
2. Script
다음 스크립트를 추가한 후 사용해야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
3. Function
1) 슬라이드 넘기기
좌우 버튼, 네비게이션 버튼, 스와이프 모션을 이용하여 슬라이드를 좌우로 넘길 수 있습니다.
2) 슬라이드 자동재생
speed를 지정하여 지정속도로 슬라이드를 자동으로 재생시킬 수 있습니다.
수정 및 재배포 금지. 사용시 링크를 표시해주세요.
'DRAWER' 카테고리의 다른 글
픽파이 중셉 (0) | 2018.11.13 |
---|---|
[UI] 화면 중앙에 레이어 띄우기 (floating layer) (0) | 2018.11.12 |
리스트 정렬 (masonry) (0) | 2018.10.13 |
달력 (2) | 2018.09.28 |
계산기 (0) | 2018.09.28 |