Docs 레이아웃 메뉴바 메인구성 자동박스 신형 자동박스(v2) Color Picker 웹 접근성 본고딕 UI/UX SEO 폰트설정 Plugins 아이콘(NDfont) Slick Tabs Sticky 전국지도 Swiper Validate Codemirror Custom Scroll Foundation 버튼 체크박스/라디오 스위치 레이블 패널 알림
레이아웃 Getting Started With Slick PLUGIN 다운로드 사이트 바로가기 <!-- 슬라이더 --> <div class="your-class"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> </div> // 롤링스크립트 $('.your-class').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true }); 기본형 상하 좌우 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 $(function(){ $('.your-class').slick({ arrows: true, dots: true, vertical: false, fade: false, infinite: true, speed: 300, slidesToShow: 1, autoplay: true, autoplaySpeed: 2000 }); }); 앨범형 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 $(function(){ $('.your-class').slick({ arrows: true, dots: true, infinite: true, speed: 300, slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000 }); }); 썸네일형 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 <!-- 썸네일형 --> <div class="your-class-for"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> </div> <div class="your-class-nav"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> </div> // 썸네일형 JS $(document).ready(function(){ $('.your-class-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: true, fade: true, asNavFor: '.your-class-nav' }); $('.your-class-nav').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.your-class-for', dots: true, arrows: false, centerMode: true, focusOnSelect: true }); });
레이아웃 Getting Started With Slick PLUGIN 다운로드 사이트 바로가기 <!-- 슬라이더 --> <div class="your-class"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> </div> // 롤링스크립트 $('.your-class').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, adaptiveHeight: true });
기본형 상하 좌우 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 $(function(){ $('.your-class').slick({ arrows: true, dots: true, vertical: false, fade: false, infinite: true, speed: 300, slidesToShow: 1, autoplay: true, autoplaySpeed: 2000 }); });
앨범형 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 $(function(){ $('.your-class').slick({ arrows: true, dots: true, infinite: true, speed: 300, slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000 }); });
썸네일형 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7 Slide 8 <!-- 썸네일형 --> <div class="your-class-for"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> </div> <div class="your-class-nav"> <div>Slide 1</div> <div>Slide 2</div> <div>Slide 3</div> <div>Slide 4</div> <div>Slide 5</div> </div> // 썸네일형 JS $(document).ready(function(){ $('.your-class-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: true, fade: true, asNavFor: '.your-class-nav' }); $('.your-class-nav').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.your-class-for', dots: true, arrows: false, centerMode: true, focusOnSelect: true }); });
