Slick Getting Started With Slick PLUGIN 다운로드 사이트 바로가기 기본 레이아웃/CSS <!-- 슬라이더 --> <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 상하 좌우 페이드 코드보기 // 기본버튼형 JS $(document).ready(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 코드보기 // 회전형 JS $(document).ready(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 코드보기 <!-- 썸네일형 --> <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 }); });