0
# Event Handling
1

2
Event system for responding to carousel lifecycle, navigation, and interaction events. Slick provides 8 event types that allow you to hook into various stages of carousel operation and user interactions.
3

4
## Event Overview
5

6
All Slick events are triggered on the carousel element and can be bound using jQuery's `.on()` method. Events should be bound before initializing the carousel or immediately after for lifecycle events.
7

8
```javascript { .api }
9
// General event binding pattern
10
$('.slider').on('eventName', function(event, slick, ...additionalParams) {
11
  // Event handler code
12
});
13
```
14

15
## Lifecycle Events
16

17
### Initialization Event
18

19
Fired when Slick initializes for the first time.
20

21
```javascript { .api }
22
/**
23
 * Fired when Slick initializes for the first time
24
 * Note: Must be bound before carousel initialization
25
 * @param event - jQuery event object
26
 * @param slick - Slick instance object
27
 */
28
$('.slider').on('init', function(event, slick) {
29
  // Initialization complete
30
});
31
```
32

33
**Usage Examples:**
34

35
```javascript
36
// Setup after initialization
37
$('.slider').on('init', function(event, slick) {
38
  console.log('Carousel initialized with', slick.slideCount, 'slides');
39
  
40
  // Add custom controls
41
  $('.custom-counter').text(`1 / ${slick.slideCount}`);
42
  
43
  // Enable custom features
44
  initializeCustomFeatures();
45
});
46

47
// Must bind before initialization
48
$('.slider').slick({
49
  dots: true,
50
  infinite: true
51
});
52
```
53

54
### Reinitialization Event
55

56
Fired every time Slick reinitializes (responsive breakpoints, option changes).
57

58
```javascript { .api }
59
/**
60
 * Fired every time Slick reinitializes
61
 * @param event - jQuery event object
62
 * @param slick - Slick instance object
63
 */
64
$('.slider').on('reInit', function(event, slick) {
65
  // Reinitialization complete
66
});
67
```
68

69
**Usage Examples:**
70

71
```javascript
72
$('.slider').on('reInit', function(event, slick) {
73
  console.log('Carousel reinitialized');
74
  
75
  // Update UI elements that depend on slide count
76
  updateSlideCounter(slick.slideCount);
77
  
78
  // Recalculate custom positioning
79
  repositionCustomElements();
80
  
81
  // Refresh third-party integrations
82
  refreshAnalytics();
83
});
84
```
85

86
### Destruction Event
87

88
Fired when the carousel is destroyed or unslicked.
89

90
```javascript { .api }
91
/**
92
 * Fired when carousel is destroyed or unslicked
93
 * @param event - jQuery event object
94
 * @param slick - Slick instance object
95
 */
96
$('.slider').on('destroy', function(event, slick) {
97
  // Cleanup before destruction
98
});
99
```
100

101
**Usage Examples:**
102

103
```javascript
104
$('.slider').on('destroy', function(event, slick) {
105
  console.log('Carousel destroyed');
106
  
107
  // Clean up custom event listeners
108
  $(window).off('resize.customSlider');
109
  
110
  // Clear custom timers
111
  clearInterval(customTimer);
112
  
113
  // Remove custom elements
114
  $('.custom-controls').remove();
115
});
116
```
117

118
### Position Recalculation Event
119

120
Fired every time Slick recalculates slide positions.
121

122
```javascript { .api }
123
/**
124
 * Fired when Slick recalculates slide positions
125
 * @param event - jQuery event object
126
 * @param slick - Slick instance object
127
 */
128
$('.slider').on('setPosition', function(event, slick) {
129
  // Position recalculation complete
130
});
131
```
132

133
**Usage Examples:**
134

135
```javascript
136
$('.slider').on('setPosition', function(event, slick) {
137
  // Update custom overlay positions
138
  updateOverlayPositions();
139
  
140
  // Recalculate custom animations
141
  recalculateParallaxEffects();
142
  
143
  // Update progress indicators
144
  updateVisualProgress();
145
});
146
```
147

148
## Navigation Events
149

150
### Before Slide Change
151

152
Fired before slide transition begins.
153

154
```javascript { .api }
155
/**
156
 * Fired before slide change begins
157
 * @param event - jQuery event object
158
 * @param slick - Slick instance object
159
 * @param currentSlide - Current slide index
160
 * @param nextSlide - Target slide index
161
 */
162
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
163
  // About to change from currentSlide to nextSlide
164
});
165
```
166

167
**Usage Examples:**
168

169
```javascript
170
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
171
  console.log(`Changing from slide ${currentSlide} to slide ${nextSlide}`);
172
  
173
  // Update slide counter
174
  $('.slide-counter').text(`${nextSlide + 1} / ${slick.slideCount}`);
175
  
176
  // Preload content for next slide
177
  preloadSlideContent(nextSlide);
178
  
179
  // Update URL hash
180
  window.location.hash = `slide-${nextSlide + 1}`;
181
  
182
  // Trigger analytics
183
  trackSlideChange(currentSlide, nextSlide);
184
  
185
  // Update navigation states
186
  updateNavigationUI(nextSlide, slick.slideCount);
187
});
188
```
189

190
### After Slide Change
191

192
Fired after slide transition completes.
193

194
```javascript { .api }
195
/**
196
 * Fired after slide change completes
197
 * @param event - jQuery event object
198
 * @param slick - Slick instance object
199
 * @param currentSlide - New current slide index
200
 */
201
$('.slider').on('afterChange', function(event, slick, currentSlide) {
202
  // Slide change complete, now on currentSlide
203
});
204
```
205

206
**Usage Examples:**
207

208
```javascript
209
$('.slider').on('afterChange', function(event, slick, currentSlide) {
210
  console.log(`Now on slide ${currentSlide}`);
211
  
212
  // Update active thumbnail
213
  $('.thumbnail').removeClass('active');
214
  $(`.thumbnail[data-slide="${currentSlide}"]`).addClass('active');
215
  
216
  // Start slide-specific animations
217
  startSlideAnimations(currentSlide);
218
  
219
  // Update browser history
220
  history.pushState({slide: currentSlide}, '', `#slide-${currentSlide + 1}`);
221
  
222
  // Focus management for accessibility
223
  $('.slider .slick-current').focus();
224
});
225
```
226

227
## Interaction Events
228

229
### Swipe Event
230

231
Fired after swipe or drag gesture completes.
232

233
```javascript { .api }
234
/**
235
 * Fired after swipe/drag gesture completes
236
 * @param event - jQuery event object
237
 * @param slick - Slick instance object
238
 * @param direction - Swipe direction: 'left', 'right', 'up', 'down'
239
 */
240
$('.slider').on('swipe', function(event, slick, direction) {
241
  // Swipe gesture completed
242
});
243
```
244

245
**Usage Examples:**
246

247
```javascript
248
$('.slider').on('swipe', function(event, slick, direction) {
249
  console.log(`Swiped ${direction}`);
250
  
251
  // Custom swipe feedback
252
  showSwipeFeedback(direction);
253
  
254
  // Track swipe interactions
255
  analytics.track('carousel_swipe', {direction: direction});
256
  
257
  // Custom swipe effects
258
  if (direction === 'up' || direction === 'down') {
259
    handleVerticalSwipe(direction);
260
  }
261
});
262

263
function showSwipeFeedback(direction) {
264
  const $feedback = $(`<div class="swipe-feedback swipe-${direction}">Swiped ${direction}</div>`);
265
  $('body').append($feedback);
266
  setTimeout(() => $feedback.remove(), 1000);
267
}
268
```
269

270
### Edge Event
271

272
Fired when edge is reached in non-infinite mode.
273

274
```javascript { .api }
275
/**
276
 * Fired when edge is overscrolled in non-infinite mode
277
 * @param event - jQuery event object
278
 * @param slick - Slick instance object
279
 * @param direction - Direction of edge hit: 'left' or 'right'
280
 */
281
$('.slider').on('edge', function(event, slick, direction) {
282
  // Edge boundary reached
283
});
284
```
285

286
**Usage Examples:**
287

288
```javascript
289
$('.slider').on('edge', function(event, slick, direction) {
290
  console.log(`Reached ${direction} edge`);
291
  
292
  // Visual feedback for edge
293
  $('.slider').addClass('edge-reached');
294
  setTimeout(() => $('.slider').removeClass('edge-reached'), 300);
295
  
296
  // Load more content when reaching right edge
297
  if (direction === 'right') {
298
    loadMoreSlides();
299
  }
300
  
301
  // Show navigation hints
302
  if (direction === 'left') {
303
    showNavigationHint('Try swiping right or using the next button');
304
  }
305
});
306

307
async function loadMoreSlides() {
308
  const newSlides = await fetchMoreSlides();
309
  newSlides.forEach(slide => {
310
    $('.slider').slick('slickAdd', slide);
311
  });
312
}
313
```
314

315
## Responsive Events
316

317
### Breakpoint Event
318

319
Fired when a responsive breakpoint is triggered.
320

321
```javascript { .api }
322
/**
323
 * Fired when a responsive breakpoint is hit
324
 * @param event - jQuery event object
325
 * @param slick - Slick instance object
326
 * @param breakpoint - Breakpoint value that was triggered
327
 */
328
$('.slider').on('breakpoint', function(event, slick, breakpoint) {
329
  // Responsive breakpoint triggered
330
});
331
```
332

333
**Usage Examples:**
334

335
```javascript
336
$('.slider').on('breakpoint', function(event, slick, breakpoint) {
337
  console.log(`Breakpoint triggered: ${breakpoint}px`);
338
  
339
  // Update layout for new breakpoint
340
  updateLayoutForBreakpoint(breakpoint);
341
  
342
  // Adjust custom controls
343
  if (breakpoint < 768) {
344
    $('.desktop-only-controls').hide();
345
    $('.mobile-controls').show();
346
  } else {
347
    $('.desktop-only-controls').show();
348
    $('.mobile-controls').hide();
349
  }
350
  
351
  // Recalculate custom dimensions
352
  recalculateCustomDimensions();
353
});
354
```
355

356
## Lazy Loading Events
357

358
### Lazy Load Success
359

360
Fired when an image loads successfully via lazy loading.
361

362
```javascript { .api }
363
/**
364
 * Fired when image loads successfully via lazy loading
365
 * @param event - jQuery event object
366
 * @param slick - Slick instance object
367
 * @param image - jQuery object of loaded image
368
 * @param imageSource - Image source URL that was loaded
369
 */
370
$('.slider').on('lazyLoaded', function(event, slick, image, imageSource) {
371
  // Image loaded successfully
372
});
373
```
374

375
### Lazy Load Error  
376

377
Fired when an image fails to load via lazy loading.
378

379
```javascript { .api }
380
/**
381
 * Fired when image fails to load via lazy loading
382
 * @param event - jQuery event object
383
 * @param slick - Slick instance object
384
 * @param image - jQuery object of failed image
385
 * @param imageSource - Image source URL that failed
386
 */
387
$('.slider').on('lazyLoadError', function(event, slick, image, imageSource) {
388
  // Image failed to load
389
});
390
```
391

392
**Usage Examples:**
393

394
```javascript
395
$('.slider').on('lazyLoaded', function(event, slick, image, imageSource) {
396
  console.log('Image loaded:', imageSource);
397
  
398
  // Hide loading spinner
399
  image.siblings('.loading-spinner').remove();
400
  
401
  // Add loaded class for animations
402
  image.addClass('loaded');
403
  
404
  // Update progress counter
405
  updateLoadingProgress();
406
});
407

408
$('.slider').on('lazyLoadError', function(event, slick, image, imageSource) {
409
  console.error('Image failed to load:', imageSource);
410
  
411
  // Show error placeholder
412
  image.attr('src', '/images/placeholder-error.jpg');
413
  image.addClass('load-error');
414
  
415
  // Track loading errors
416
  analytics.track('image_load_error', {src: imageSource});
417
});
418
```
419

420
## Event Chaining and Complex Interactions
421

422
```javascript { .api }
423
// Multiple event handlers for complex workflows
424
$('.slider')
425
  .on('init', function(event, slick) {
426
    initializeCustomFeatures(slick);
427
  })
428
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
429
    prepareSlideTransition(currentSlide, nextSlide);
430
  })
431
  .on('afterChange', function(event, slick, currentSlide) {
432
    completeSlideTransition(currentSlide);
433
  })
434
  .on('swipe', function(event, slick, direction) {
435
    handleSwipeGesture(direction);
436
  })
437
  .slick({
438
    autoplay: true,
439
    dots: true,
440
    responsive: [...]
441
  });
442

443
// Event-driven state management
444
class SliderStateManager {
445
  constructor(sliderSelector) {
446
    this.slider = $(sliderSelector);
447
    this.state = {
448
      currentSlide: 0,
449
      isPlaying: false,
450
      hasUserInteracted: false
451
    };
452
    
453
    this.bindEvents();
454
  }
455
  
456
  bindEvents() {
457
    this.slider
458
      .on('afterChange', (e, slick, currentSlide) => {
459
        this.state.currentSlide = currentSlide;
460
        this.updateUI();
461
      })
462
      .on('swipe', () => {
463
        this.state.hasUserInteracted = true;
464
        this.handleUserInteraction();
465
      });
466
  }
467
  
468
  updateUI() {
469
    // Update UI based on current state
470
  }
471
  
472
  handleUserInteraction() {
473
    // Handle user interaction logic
474
  }
475
}
476
```