CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

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
0Slide 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');
});

추천한 사람

 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기