example
jQuery(function ($) {
$('.single-item').slick({
dots:true
});
});| Setting | Default | Description | Remarks |
|---|---|---|---|
| accessibility | true | Enables tabbing and arrow key navigation | |
| adaptiveHeight | false | Enables adaptive height for single slide horizontal carousels. | jQuery 버전에 따라서인지, 카페24에서 삽입시 오류가 있음. |
| autoplay | false | Enables Autoplay | |
| autoplaySpeed | 3000 | Autoplay Speed in milliseconds | |
| arrows | true | Prev/Next Arrows | |
| asNavFor | null | Set the slider to be the navigation of other slider (Class or ID Name) | |
| appendArrows | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object) | |
| appendDots | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object) | |
| prevArrow | <button type="button" class="slick-prev">Previous</button> | Allows you to select a node or customize the HTML for the "Previous" arrow. | |
| nextArrow | <button type="button" class="slick-next">Next</button> | Allows you to select a node or customize the HTML for the "Next" arrow. | |
| centerMode | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts. | |
| centerPadding | '50px' | Side padding when in center mode (px or %) | |
| cssEase | 'ease' | CSS3 Animation Easing | |
| customPaging | n/a | Custom paging templates. See source for use example. | |
| dots | false | Show dot indicators | |
| dotsClass | 'slick-dots' | Class for slide indicator dots container | |
| draggable | true | Enable mouse dragging | |
| fade | false | Enable fade | |
| focusOnSelect | false | Enable focus on selected element (click) | |
| easing | 'linear' | Add easing for jQuery animate. Use with easing libraries or default easing methods | |
| edgeFriction | 0.15 | Resistance when swiping edges of non-infinite carousels | |
| infinite | true | Infinite loop sliding | |
| initialSlide | 0 | Slide to start on | |
| lazyLoad | 'ondemand' | Set lazy loading technique. Accepts 'ondemand' or 'progressive' | |
| mobileFirst | false | Responsive settings use mobile first calculation | |
custom arrow
<button type="button" class="slick-prev">asdfsdf</button>
jQuery(function ($) {
$('.single-item').slick({
// adaptiveHeight: true, // 오류 발생
dots:true,
prevArrow:$('.slick-prev')
}).css('margin-top','80px');
$('.slick-track').css('height','400');
});
댓글 0
댓글작성칸으로