0
# Configuration
1

2
Comprehensive configuration system with 48+ options covering display, animation, navigation, interaction, and responsive behavior. Options can be set during initialization or modified at runtime.
3

4
## Capabilities
5

6
### Initialize Carousel
7

8
Creates a new Slick carousel instance with the specified configuration options.
9

10
```javascript { .api }
11
/**
12
 * Initialize Slick carousel on selected elements
13
 * @param options - Configuration object with carousel settings
14
 * @returns jQuery object for chaining
15
 */
16
$('.slider').slick(options);
17
```
18

19
**Usage Examples:**
20

21
```javascript
22
// Basic initialization
23
$('.slider').slick();
24

25
// With custom options
26
$('.slider').slick({
27
  dots: true,
28
  infinite: true,
29
  speed: 300,
30
  slidesToShow: 3,
31
  slidesToScroll: 1,
32
  responsive: [
33
    {
34
      breakpoint: 768,
35
      settings: {
36
        slidesToShow: 2
37
      }
38
    },
39
    {
40
      breakpoint: 480,
41
      settings: {
42
        slidesToShow: 1
43
      }
44
    }
45
  ]
46
});
47

48
// Declarative configuration via data attributes
49
// HTML: <div class="slider" data-slick='{"slidesToShow": 4, "dots": true}'>
50
$('.slider').slick(); // Reads configuration from data-slick attribute
51
```
52

53
### Get Configuration Option
54

55
Retrieves the current value of a specific configuration option.
56

57
```javascript { .api }
58
/**
59
 * Get current value of a configuration option
60
 * @param option - Name of the option to retrieve
61
 * @returns Current value of the specified option
62
 */
63
$('.slider').slick('slickGetOption', option);
64
```
65

66
**Usage Examples:**
67

68
```javascript
69
// Get current speed setting
70
var speed = $('.slider').slick('slickGetOption', 'speed');
71

72
// Get slides to show setting
73
var slidesToShow = $('.slider').slick('slickGetOption', 'slidesToShow');
74

75
// Get autoplay status
76
var autoplay = $('.slider').slick('slickGetOption', 'autoplay');
77
```
78

79
### Set Configuration Option
80

81
Updates configuration options at runtime with optional refresh.
82

83
```javascript { .api }
84
/**
85
 * Set single configuration option
86
 * @param option - Name of the option to set
87
 * @param value - New value for the option
88
 * @param refresh - Whether to refresh the carousel (default: false)
89
 */
90
$('.slider').slick('slickSetOption', option, value, refresh);
91

92
/**
93
 * Set multiple configuration options
94
 * @param options - Object containing multiple option key-value pairs
95
 * @param refresh - Whether to refresh the carousel (default: false)
96
 */
97
$('.slider').slick('slickSetOption', options, refresh);
98

99
/**
100
 * Set responsive configuration
101
 * @param 'responsive' - Literal string 'responsive'
102
 * @param responsiveArray - Array of responsive breakpoint configurations
103
 * @param refresh - Whether to refresh the carousel (default: false)
104
 */
105
$('.slider').slick('slickSetOption', 'responsive', responsiveArray, refresh);
106
```
107

108
**Usage Examples:**
109

110
```javascript
111
// Change single option
112
$('.slider').slick('slickSetOption', 'speed', 1000, true);
113

114
// Change multiple options
115
$('.slider').slick('slickSetOption', {
116
  speed: 800,
117
  autoplay: true,
118
  autoplaySpeed: 2000
119
}, true);
120

121
// Update responsive settings
122
$('.slider').slick('slickSetOption', 'responsive', [
123
  {
124
    breakpoint: 1024,
125
    settings: {
126
      slidesToShow: 3,
127
      infinite: true
128
    }
129
  },
130
  {
131
    breakpoint: 600,
132
    settings: {
133
      slidesToShow: 2,
134
      dots: true
135
    }
136
  }
137
], true);
138
```
139

140
## Display Configuration Options
141

142
```javascript { .api }
143
interface DisplayOptions {
144
  /** Number of slides to show at once (default: 1) */
145
  slidesToShow?: number;
146
  
147
  /** Number of slides to scroll at once (default: 1) */
148
  slidesToScroll?: number;
149
  
150
  /** Enable infinite looping (default: true) */
151
  infinite?: boolean;
152
  
153
  /** Starting slide index (default: 0) */
154
  initialSlide?: number;
155
  
156
  /** Number of rows in grid mode (default: 1) */
157
  rows?: number;
158
  
159
  /** Slides per row in grid mode (default: 1) */
160
  slidesPerRow?: number;
161
  
162
  /** Enable variable slide widths (default: false) */
163
  variableWidth?: boolean;
164
  
165
  /** Enable center mode with partial slides (default: false) */
166
  centerMode?: boolean;
167
  
168
  /** Side padding in center mode (default: '50px') */
169
  centerPadding?: string;
170
  
171
  /** Enable vertical sliding (default: false) */
172
  vertical?: boolean;
173
  
174
  /** Adapt height to current slide (default: false) */
175
  adaptiveHeight?: boolean;
176
  
177
  /** Right-to-left direction (default: false) */
178
  rtl?: boolean;
179
}
180
```
181

182
## Animation Configuration Options
183

184
```javascript { .api }
185
interface AnimationOptions {
186
  /** Transition speed in milliseconds (default: 500) */
187
  speed?: number;
188
  
189
  /** Enable fade transitions (default: false) */
190
  fade?: boolean;
191
  
192
  /** CSS3 easing function (default: 'ease') */
193
  cssEase?: string;
194
  
195
  /** jQuery easing fallback (default: 'linear') */
196
  easing?: string;
197
  
198
  /** Enable CSS transitions (default: true) */
199
  useCSS?: boolean;
200
  
201
  /** Enable CSS transforms (default: true) */
202
  useTransform?: boolean;
203
  
204
  /** Wait for animation before new commands (default: true) */
205
  waitForAnimate?: boolean;
206
  
207
  /** Base z-index for slides (default: 1000) */
208
  zIndex?: number;
209
}
210
```
211

212
## Navigation Configuration Options
213

214
```javascript { .api }
215
interface NavigationOptions {
216
  /** Show prev/next arrows (default: true) */
217
  arrows?: boolean;
218
  
219
  /** Previous arrow HTML or selector (default: button element) */
220
  prevArrow?: string | HTMLElement | JQuery;
221
  
222
  /** Next arrow HTML or selector (default: button element) */
223
  nextArrow?: string | HTMLElement | JQuery;
224
  
225
  /** Where to append arrows (default: slider element) */
226
  appendArrows?: string | HTMLElement | JQuery;
227
  
228
  /** Show dot indicators (default: false) */
229
  dots?: boolean;
230
  
231
  /** CSS class for dots container (default: 'slick-dots') */
232
  dotsClass?: string;
233
  
234
  /** Where to append dots (default: slider element) */
235
  appendDots?: string | HTMLElement | JQuery;
236
  
237
  /** Custom dot content function */
238
  customPaging?: (slider: any, i: number) => JQuery;
239
}
240
```
241

242
## Interaction Configuration Options
243

244
```javascript { .api }
245
interface InteractionOptions {
246
  /** Enable mouse dragging (default: true) */
247
  draggable?: boolean;
248
  
249
  /** Enable touch/swipe (default: true) */
250
  swipe?: boolean;
251
  
252
  /** Enable slide moving with touch (default: true) */
253
  touchMove?: boolean;
254
  
255
  /** Swipe sensitivity threshold (default: 5) */
256
  touchThreshold?: number;
257
  
258
  /** Allow swiping to any slide (default: false) */
259
  swipeToSlide?: boolean;
260
  
261
  /** Enable vertical swiping (default: false) */
262
  verticalSwiping?: boolean;
263
  
264
  /** Resistance at non-infinite edges (default: 0.35) */
265
  edgeFriction?: number;
266
  
267
  /** Focus on slide when clicked (default: false) */
268
  focusOnSelect?: boolean;
269
  
270
  /** Focus on slide after change (default: false) */
271
  focusOnChange?: boolean;
272
}
273
```
274

275
## Autoplay Configuration Options
276

277
```javascript { .api }
278
interface AutoplayOptions {
279
  /** Enable autoplay (default: false) */
280
  autoplay?: boolean;
281
  
282
  /** Autoplay interval in milliseconds (default: 3000) */
283
  autoplaySpeed?: number;
284
  
285
  /** Pause autoplay on hover (default: true) */
286
  pauseOnHover?: boolean;
287
  
288
  /** Pause autoplay when focused (default: true) */
289
  pauseOnFocus?: boolean;
290
  
291
  /** Pause autoplay on dot hover (default: false) */
292
  pauseOnDotsHover?: boolean;
293
}
294
```
295

296
## Responsive Configuration Options
297

298
```javascript { .api }
299
interface ResponsiveOptions {
300
  /** Responsive breakpoint settings */
301
  responsive?: ResponsiveOption[];
302
  
303
  /** Mobile-first responsive breakpoints (default: false) */
304
  mobileFirst?: boolean;
305
  
306
  /** What to respond to: 'window', 'slider', or 'min' (default: 'window') */
307
  respondTo?: 'window' | 'slider' | 'min';
308
}
309

310
interface ResponsiveOption {
311
  /** Screen width breakpoint */
312
  breakpoint: number;
313
  
314
  /** Settings to apply at this breakpoint, or 'unslick' to disable */
315
  settings: Partial<SlickOptions> | 'unslick';
316
}
317
```
318

319
## Accessibility Configuration Options
320

321
```javascript { .api }
322
interface AccessibilityOptions {
323
  /** Enable keyboard navigation and ARIA (default: true) */
324
  accessibility?: boolean;
325
  
326
  /** Slide element query selector (default: '') */
327
  slide?: string;
328
}
329
```
330

331
## Advanced Configuration Options
332

333
```javascript { .api }
334
interface AdvancedOptions {
335
  /** Sync with another slider (selector or jQuery object) */
336
  asNavFor?: string | JQuery;
337
  
338
  /** Lazy loading mode: 'ondemand' or 'progressive' (default: 'ondemand') */
339
  lazyLoad?: 'ondemand' | 'progressive';
340
}
341
```