[UI] Carousel, Slider

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를 지정하여 지정속도로 슬라이드를 자동으로 재생시킬 수 있습니다.

수정 및 재배포 금지. 사용시 링크를 표시해주세요.

​