README.markdown
1slick
2-------
3
4[1]: <https://github.com/kenwheeler/slick>
5
6_the last carousel you'll ever need_
7
8#### Demo
9
10[http://kenwheeler.github.io/slick](http://kenwheeler.github.io/slick/)
11
12#### CDN
13
14CDN hosted slick is a great way to get set up quick:
15
16In your ```<head>``` add:
17
18````
19<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
20
21// Add the slick-theme.css if you want default styling
22<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css"/>
23````
24
25Then, before your closing ```<body>``` tag add:
26
27```
28<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
29```
30
31#### Package Managers
32
33````
34//Bower
35bower install --save slick-carousel
36
37//NPM
38npm install slick-carousel
39````
40
41#### Contributing
42
43PLEASE review CONTRIBUTING.markdown prior to requesting a feature, filing a pull request or filing an issue.
44
45### Data Attribute Settings
46
47In slick 1.5 you can now add settings using the data-slick attribute. You still need to call $(element).slick() to initialize slick on the element.
48
49Example:
50
51```markup
52<div data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
53 <div><h3>1</h3></div>
54 <div><h3>2</h3></div>
55 <div><h3>3</h3></div>
56 <div><h3>4</h3></div>
57 <div><h3>5</h3></div>
58 <div><h3>6</h3></div>
59</div>
60```
61
62#### Settings
63
64Option | Type | Default | Description
65------ | ---- | ------- | -----------
66accessibility | boolean | true | Enables tabbing and arrow key navigation
67autoplay | boolean | false | Enables auto play of slides
68autoplaySpeed | int | 3000 | Auto play change interval
69centerMode | boolean | false | Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
70centerPadding | string | '50px' | Side padding when in center mode. (px or %)
71cssEase | string | 'ease' | CSS3 easing
72customPaging | function | n/a | Custom paging templates. See source for use example.
73dots | boolean | false | Current slide indicator dots
74dotsClass | string | 'slick-dots' | Class for slide indicator dots container
75draggable | boolean | true | Enables desktop dragging
76easing | string | 'linear' | animate() fallback easing
77edgeFriction | integer | 0.15 | Resistance when swiping edges of non-infinite carousels
78fade | boolean | false | Enables fade
79arrows | boolean | true | Enable Next/Prev arrows
80appendArrows | string | $(element) | Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
81appendDots | string | $(element) | Change where the navigation dots are attached (Selector, htmlString, Array, Element, jQuery object)
82mobileFirst | boolean | false | Responsive settings use mobile first calculation
83prevArrow | string (html|jQuery selector) | object (DOM node|jQuery object) | <button type="button" class="slick-prev">Previous</button> | Allows you to select a node or customize the HTML for the "Previous" arrow.
84nextArrow | string (html|jQuery selector) | object (DOM node|jQuery object) | <button type="button" class="slick-next">Next</button> | Allows you to select a node or customize the HTML for the "Next" arrow.
85infinite | boolean | true | Infinite looping
86initialSlide | integer | 0 | Slide to start on
87lazyLoad | string | 'ondemand' | Accepts 'ondemand' or 'progressive' for lazy load technique
88pauseOnHover | boolean | true | Pauses autoplay on hover
89pauseOnDotsHover | boolean | false | Pauses autoplay when a dot is hovered
90respondTo | string | 'window' | Width that responsive object responds to. Can be 'window', 'slider' or 'min' (the smaller of the two).
91responsive | object | null | Object containing breakpoints and settings objects (see demo). Enables settings sets at given screen width. Set settings to "unslick" instead of an object to disable slick at a given breakpoint.
92rows | int | 1 | Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
93slide | string | '' | Slide element query
94slidesPerRow | int | 1 | With grid mode intialized via the rows option, this sets how many slides are in each grid row.
95slidesToShow | int | 1 | # of slides to show at a time
96slidesToScroll | int | 1 | # of slides to scroll at a time
97speed | int | 300 | Transition speed
98swipe | boolean | true | Enables touch swipe
99swipeToSlide | boolean | false | Swipe to slide irrespective of slidesToScroll
100touchMove | boolean | true | Enables slide moving with touch
101touchThreshold | int | 5 | To advance slides, the user must swipe a length of (1/touchThreshold) * the width of the slider.
102useCSS | boolean | true | Enable/Disable CSS Transitions
103variableWidth | boolean | false | Disables automatic slide width calculation
104vertical | boolean | false | Vertical slide direction
105verticalSwiping | boolean | false | Changes swipe direction to vertical
106rtl | boolean | false | Change the slider's direction to become right-to-left
107waitForAnimate | boolean | true | Ignores requests to advance the slide while animating
108zIndex | number | 1000 | Set the zIndex values for slides, useful for IE9 and lower
109
110### Events
111
112In slick 1.4, callback methods have been deprecated and replaced with events. Use them before the initialization of slick as shown below:
113
114```javascript
115// On swipe event
116$('.your-element').on('swipe', function(event, slick, direction){
117 console.log(direction);
118 // left
119});
120
121// On edge hit
122$('.your-element').on('edge', function(event, slick, direction){
123 console.log('edge was hit')
124});
125
126// On before slide change
127$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
128 console.log(nextSlide);
129});
130```
131
132Event | Params | Description
133------ | -------- | -----------
134afterChange | event, slick, currentSlide | After slide change callback
135beforeChange | event, slick, currentSlide, nextSlide | Before slide change callback
136breakpoint | event, slick, breakpoint | Fires after a breakpoint is hit
137destroy | event, slick | When slider is destroyed, or unslicked.
138edge | event, slick, direction | Fires when an edge is overscrolled in non-infinite mode.
139init | event, slick | When Slick initializes for the first time callback. Note that this event should be defined before initializing the slider.
140reInit | event, slick | Every time Slick (re-)initializes callback
141setPosition | event, slick | Every time Slick recalculates position
142swipe | event, slick, direction | Fires after swipe/drag
143
144
145#### Methods
146
147Methods are called on slick instances through the slick method itself in version 1.4, see below:
148
149```javascript
150// Add a slide
151$('.your-element').slick('slickAdd',"<div></div>");
152
153// Get the current slide
154var currentSlide = $('.your-element').slick('slickCurrentSlide');
155```
156
157This new syntax allows you to call any internal slick method as well:
158
159```javascript
160// Manually refresh positioning of slick
161$('.your-element').slick('setPosition');
162```
163
164
165Method | Argument | Description
166------ | -------- | -----------
167slick | options : object | Initializes Slick
168unslick | | Destroys Slick
169slickNext | | Triggers next slide
170slickPrev | | Triggers previous slide
171slickPause | | Pause Autoplay
172slickPlay | | Start Autoplay
173slickGoTo | index : int, dontAnimate : bool | Goes to slide by index, skipping animation if second parameter is set to true
174slickCurrentSlide | | Returns the current slide index
175slickAdd | element : html or DOM object, index: int, addBefore: bool | Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String || Object
176slickRemove | index: int, removeBefore: bool | Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
177slickFilter | filter : selector or function | Filters slides using jQuery .filter syntax
178slickUnfilter | | Removes applied filter
179slickGetOption | option : string(option name) | Gets an option value.
180slickSetOption | option : string(option name), value : depends on option, refresh : boolean | Sets an option live. Set refresh to true if it is an option that changes the display
181
182
183#### Example
184
185Initialize with:
186
187```javascript
188$(element).slick({
189 dots: true,
190 speed: 500
191});
192 ```
193
194Destroy with:
195
196```javascript
197$(element).slick('unslick');
198```
199
200
201#### Sass Variables
202
203Variable | Type | Default | Description
204------ | ---- | ------- | -----------
205$slick-font-path | string | "./fonts/" | Directory path for the slick icon font
206$slick-font-family | string | "slick" | Font-family for slick icon font
207$slick-loader-path | string | "./" | Directory path for the loader image
208$slick-arrow-color | color | white | Color of the left/right arrow icons
209$slick-dot-color | color | black | Color of the navigation dots
210$slick-dot-color-active | color | $slick-dot-color | Color of the active navigation dot
211$slick-prev-character | string | '\2190' | Unicode character code for the previous arrow icon
212$slick-next-character | string | '\2192' | Unicode character code for the next arrow icon
213$slick-dot-character | string | '\2022' | Unicode character code for the navigation dot icon
214$slick-dot-size | pixels | 6px | Size of the navigation dots
215
216
217#### Dependencies
218
219jQuery 1.7
220
221#### License
222
223Copyright (c) 2014 Ken Wheeler
224
225Licensed under the MIT license.
226
227Free as in Bacon.
228
