0
# Slick Carousel
1

2
Slick is a fully responsive jQuery carousel plugin that provides extensive customization options for creating interactive slide presentations. It supports infinite looping, autoplay functionality, touch/swipe navigation, responsive breakpoints, lazy loading, fade transitions, center mode, and accessibility features. The library offers both programmatic control through JavaScript methods and declarative configuration via data attributes.
3

4
## Package Information
5

6
- **Package Name**: slick-carousel
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install slick-carousel`
10
- **Dependencies**: jQuery >= 1.8.0
11

12
## Core Imports
13

14
CDN (jsDelivr):
15

16
```html
17
<!-- CSS -->
18
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
19
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>
20

21
<!-- JavaScript -->
22
<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.min.js"></script>
23
```
24

25
NPM/Webpack:
26

27
```javascript
28
import "slick-carousel/slick/slick.css";
29
import "slick-carousel/slick/slick-theme.css";
30
import "slick-carousel";
31
```
32

33
CommonJS:
34

35
```javascript
36
require("slick-carousel/slick/slick.css");
37
require("slick-carousel/slick/slick-theme.css");
38
require("slick-carousel");
39
```
40

41
## Basic Usage
42

43
```javascript
44
// Initialize with default settings
45
$('.slider').slick();
46

47
// Initialize with custom settings
48
$('.slider').slick({
49
  dots: true,
50
  infinite: true,
51
  speed: 300,
52
  slidesToShow: 1,
53
  adaptiveHeight: true
54
});
55

56
// Using data attributes (HTML)
57
// <div class="slider" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
58
//   <div><h3>Slide 1</h3></div>
59
//   <div><h3>Slide 2</h3></div>
60
// </div>
61
$('.slider').slick(); // Initialize sliders with data attributes
62
```
63

64
## Architecture
65

66
Slick is built around several key components:
67

68
- **jQuery Plugin Interface**: Main `$.fn.slick` method for initialization and method calls
69
- **Slick Constructor**: Core carousel class managing all functionality and state
70
- **Configuration System**: Comprehensive options object with 48+ settings
71
- **Event System**: 8 event types for lifecycle and interaction handling
72
- **Responsive System**: Breakpoint-based configuration changes
73
- **Accessibility Features**: Full ARIA support and keyboard navigation
74

75
## Capabilities
76

77
### Initialization and Configuration
78

79
Core initialization functionality and configuration management for carousel setup and runtime options.
80

81
```javascript { .api }
82
// Initialize carousel
83
$('.slider').slick(options);
84

85
// Get/set configuration options
86
$('.slider').slick('slickGetOption', 'speed');
87
$('.slider').slick('slickSetOption', 'speed', 1000, true);
88
```
89

90
[Configuration](./configuration.md)
91

92
### Navigation Control
93

94
Programmatic navigation methods for controlling slide movement and position.
95

96
```javascript { .api }
97
// Navigate slides
98
$('.slider').slick('slickNext');
99
$('.slider').slick('slickPrev');
100
$('.slider').slick('slickGoTo', 2, false);
101

102
// Get current slide
103
var currentSlide = $('.slider').slick('slickCurrentSlide');
104
```
105

106
[Navigation](./navigation.md)
107

108
### Slide Management
109

110
Dynamic slide manipulation including adding, removing, and filtering slides at runtime.
111

112
```javascript { .api }
113
// Add slides
114
$('.slider').slick('slickAdd', '<div>New slide</div>', 2, false);
115

116
// Remove slides
117
$('.slider').slick('slickRemove', 1, false, false);
118

119
// Filter slides
120
$('.slider').slick('slickFilter', '.active');
121
$('.slider').slick('slickUnfilter');
122
```
123

124
[Slide Management](./slide-management.md)
125

126
### Playback Control
127

128
Autoplay functionality control for starting, stopping, and managing automatic slide progression.
129

130
```javascript { .api }
131
// Control autoplay
132
$('.slider').slick('slickPlay');
133
$('.slider').slick('slickPause');
134
```
135

136
[Playback Control](./playback-control.md)
137

138
### Event Handling
139

140
Event system for responding to carousel lifecycle, navigation, and interaction events.
141

142
```javascript { .api }
143
// Bind to events
144
$('.slider').on('afterChange', function(event, slick, currentSlide){
145
  console.log('Changed to slide', currentSlide);
146
});
147

148
$('.slider').on('swipe', function(event, slick, direction){
149
  console.log('Swiped', direction);
150
});
151
```
152

153
[Event Handling](./event-handling.md)
154

155
### Destruction and Cleanup
156

157
Methods for destroying carousel instances and cleaning up resources.
158

159
```javascript { .api }
160
// Destroy carousel
161
$('.slider').slick('unslick');
162
```
163

164
[Destruction](./destruction.md)
165

166
## Core Types
167

168
```javascript { .api }
169
// Main configuration options interface
170
interface SlickOptions {
171
  // Display options
172
  slidesToShow?: number;        // Default: 1
173
  slidesToScroll?: number;      // Default: 1
174
  infinite?: boolean;           // Default: true
175
  
176
  // Animation options
177
  speed?: number;               // Default: 500
178
  fade?: boolean;               // Default: false
179
  cssEase?: string;             // Default: 'ease'
180
  
181
  // Navigation options
182
  arrows?: boolean;             // Default: true
183
  dots?: boolean;               // Default: false
184
  
185
  // Autoplay options
186
  autoplay?: boolean;           // Default: false
187
  autoplaySpeed?: number;       // Default: 3000
188
  
189
  // Interaction options
190
  draggable?: boolean;          // Default: true
191
  swipe?: boolean;              // Default: true
192
  touchMove?: boolean;          // Default: true
193
  
194
  // Responsive options
195
  responsive?: ResponsiveOption[];
196
  mobileFirst?: boolean;        // Default: false
197
  
198
  // Accessibility options
199
  accessibility?: boolean;      // Default: true
200
  
201
  // Advanced options
202
  centerMode?: boolean;         // Default: false
203
  variableWidth?: boolean;      // Default: false
204
  vertical?: boolean;           // Default: false
205
  rtl?: boolean;               // Default: false
206
  lazyLoad?: 'ondemand' | 'progressive'; // Default: 'ondemand'
207
}
208

209
// Responsive breakpoint configuration
210
interface ResponsiveOption {
211
  breakpoint: number;
212
  settings: SlickOptions | 'unslick';
213
}
214

215
// Event callback signatures
216
type SlickEventCallback = (event: Event, slick: any, ...args: any[]) => void;
217
```