API
Settings
accessibility
Type: bool
Default: true
Enable tabbing and arrow key navigation
adaptiveHeight
Type: bool
Default: false
Adjust the slide's height automatically
afterChange
Type: func
Default: Default
Index change callback. `index => ...`
appendDots
Type: func
Default: dots => <ul>{dots}</ul>
Custom dots templates. Works same as customPaging
arrows
Type: bool
Default: true
asNavFor
Type: ref
Default: undefined
provide ref to another slider and sync it with current slider
autoplaySpeed
Type: int
Default: 3000
Delay between each auto scroll (in milliseconds)
autoplay
Type: bool
Default: false
beforeChange
Type: func
Default: null
Index change callback. `(oldIndex, newIndex) => ...`
centerMode
Type: bool
Default: false
Center current slide
centerPadding
Type: string
Default: '50px'
className
Type: string
Default: ''
CSS class for inner slider div
customPaging
Type: func
Default: i => <button>{i + 1}</button>
Custom paging templates. [Example](examples/CustomPaging.js)
dotsClass
Type: string
Default: 'slick-dots'
CSS class for dots
dots
Type: bool
Default: Default
draggable
Type: bool
Default: true
Enable scrollable via dragging on desktop
easing
Type: string
Default: 'linear'
fade
Type: bool
Default: Default
focusOnSelect
Type: bool
Default: false
Go to slide on click
infinite
Type: bool
Default: true
Infinitely wrap around contents
initialSlide
Type: int
Default: 0
Index of first slide
lazyLoad
Type: ondemand`/`progressive
Default: null
Load images or render components on demand or progressively
onEdge
Type: func
Default: null
Edge dragged event in finite case, `direction => {...}`
onInit
Type: func
Default: null
componentWillMount callback. `() => void`
onLazyLoad
Type: func
Default: null
Callback after slides load lazily `slidesLoaded => {...}`
onReInit
Type: func
Default: null
componentDidUpdate callback. `() => void`
onSwipe
Type: func
Default: null
Callback after slide changes by swiping
pauseOnDotsHover
Type: bool
Default: false
Prevents autoplay while hovering on dots
pauseOnFocus
Type: bool
Default: false
Prevents autoplay while focused on slides
pauseOnHover
Type: bool
Default: true
Prevents autoplay while hovering on track
responsive
Type: array
Default: null
Customize based on breakpoints (see the demo example for better understanding)
rows
Type: integer
Default: 1
number of rows per slide in the slider, (enables grid mode)
rtl
Type: bool
Default: false
Reverses the slide order
slide
Type: string
Default: 'div'
Slide container type
slidesPerRow
Type: int
Default: 1
number of slides to display in grid mode, this is useful with rows option
slidesToScroll
Type: int
Default: 1
How many slides to scroll at once
slidesToShow
Type: int
Default: 1
How many slides to show in one frame
speed
Type: int
Default: 500
Animation speed in milliseconds
swipeToSlide
Type: bool
Default: false
Enable drag/swipe irrespective of `slidesToScroll`
swipe
Type: bool
Default: true
Enable/disable swiping to change slides
touchMove
Type: bool
Default: true
touchThreshold
Type: int
Default: 5
useCSS
Type: bool
Default: true
Enable/Disable CSS Transitions
useTransform
Type: bool
Default: true
Enable/Disable CSS transforms
variableWidth
Type: bool
Default: false
vertical
Type: bool
Default: false
Methods
slickGoTo
Args: index, dontAnimate
Default: null, false
Go to slide index, if dontAnimate=true, it happens without animation
slickNext
Args: none
Default: none
Go to the next slide
slickPause
Args: none
Default: none
Pause the autoplay
slickPlay
Args: none
Default: none
Start the autoplay
slickPrev
Args: none
Default: none
Go to the previous slide