tessl/npm-slick-carousel

Responsive jQuery carousel plugin with extensive customization options for creating interactive slide presentations

—

Pending

Overview

Eval results

Files

Event Handling

Name: tessl/npm-slick-carousel
Author: tessl

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.

Event Overview

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.

// General event binding pattern
$('.slider').on('eventName', function(event, slick, ...additionalParams) {
  // Event handler code
});

Lifecycle Events

Initialization Event

Fired when Slick initializes for the first time.

/**
 * Fired when Slick initializes for the first time
 * Note: Must be bound before carousel initialization
 * @param event - jQuery event object
 * @param slick - Slick instance object
 */
$('.slider').on('init', function(event, slick) {
  // Initialization complete
});

Usage Examples:

// Setup after initialization
$('.slider').on('init', function(event, slick) {
  console.log('Carousel initialized with', slick.slideCount, 'slides');
  
  // Add custom controls
  $('.custom-counter').text(`1 / ${slick.slideCount}`);
  
  // Enable custom features
  initializeCustomFeatures();
});

// Must bind before initialization
$('.slider').slick({
  dots: true,
  infinite: true
});

Reinitialization Event

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

/**
 * Fired every time Slick reinitializes
 * @param event - jQuery event object
 * @param slick - Slick instance object
 */
$('.slider').on('reInit', function(event, slick) {
  // Reinitialization complete
});

Usage Examples:

$('.slider').on('reInit', function(event, slick) {
  console.log('Carousel reinitialized');
  
  // Update UI elements that depend on slide count
  updateSlideCounter(slick.slideCount);
  
  // Recalculate custom positioning
  repositionCustomElements();
  
  // Refresh third-party integrations
  refreshAnalytics();
});

Destruction Event

Fired when the carousel is destroyed or unslicked.

/**
 * Fired when carousel is destroyed or unslicked
 * @param event - jQuery event object
 * @param slick - Slick instance object
 */
$('.slider').on('destroy', function(event, slick) {
  // Cleanup before destruction
});

Usage Examples:

$('.slider').on('destroy', function(event, slick) {
  console.log('Carousel destroyed');
  
  // Clean up custom event listeners
  $(window).off('resize.customSlider');
  
  // Clear custom timers
  clearInterval(customTimer);
  
  // Remove custom elements
  $('.custom-controls').remove();
});

Position Recalculation Event

Fired every time Slick recalculates slide positions.

/**
 * Fired when Slick recalculates slide positions
 * @param event - jQuery event object
 * @param slick - Slick instance object
 */
$('.slider').on('setPosition', function(event, slick) {
  // Position recalculation complete
});

Usage Examples:

$('.slider').on('setPosition', function(event, slick) {
  // Update custom overlay positions
  updateOverlayPositions();
  
  // Recalculate custom animations
  recalculateParallaxEffects();
  
  // Update progress indicators
  updateVisualProgress();
});

Navigation Events

Before Slide Change

Fired before slide transition begins.

/**
 * Fired before slide change begins
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param currentSlide - Current slide index
 * @param nextSlide - Target slide index
 */
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  // About to change from currentSlide to nextSlide
});

Usage Examples:

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {
  console.log(`Changing from slide ${currentSlide} to slide ${nextSlide}`);
  
  // Update slide counter
  $('.slide-counter').text(`${nextSlide + 1} / ${slick.slideCount}`);
  
  // Preload content for next slide
  preloadSlideContent(nextSlide);
  
  // Update URL hash
  window.location.hash = `slide-${nextSlide + 1}`;
  
  // Trigger analytics
  trackSlideChange(currentSlide, nextSlide);
  
  // Update navigation states
  updateNavigationUI(nextSlide, slick.slideCount);
});

After Slide Change

Fired after slide transition completes.

/**
 * Fired after slide change completes
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param currentSlide - New current slide index
 */
$('.slider').on('afterChange', function(event, slick, currentSlide) {
  // Slide change complete, now on currentSlide
});

Usage Examples:

$('.slider').on('afterChange', function(event, slick, currentSlide) {
  console.log(`Now on slide ${currentSlide}`);
  
  // Update active thumbnail
  $('.thumbnail').removeClass('active');
  $(`.thumbnail[data-slide="${currentSlide}"]`).addClass('active');
  
  // Start slide-specific animations
  startSlideAnimations(currentSlide);
  
  // Update browser history
  history.pushState({slide: currentSlide}, '', `#slide-${currentSlide + 1}`);
  
  // Focus management for accessibility
  $('.slider .slick-current').focus();
});

Interaction Events

Swipe Event

Fired after swipe or drag gesture completes.

/**
 * Fired after swipe/drag gesture completes
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param direction - Swipe direction: 'left', 'right', 'up', 'down'
 */
$('.slider').on('swipe', function(event, slick, direction) {
  // Swipe gesture completed
});

Usage Examples:

$('.slider').on('swipe', function(event, slick, direction) {
  console.log(`Swiped ${direction}`);
  
  // Custom swipe feedback
  showSwipeFeedback(direction);
  
  // Track swipe interactions
  analytics.track('carousel_swipe', {direction: direction});
  
  // Custom swipe effects
  if (direction === 'up' || direction === 'down') {
    handleVerticalSwipe(direction);
  }
});

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

Edge Event

Fired when edge is reached in non-infinite mode.

/**
 * Fired when edge is overscrolled in non-infinite mode
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param direction - Direction of edge hit: 'left' or 'right'
 */
$('.slider').on('edge', function(event, slick, direction) {
  // Edge boundary reached
});

Usage Examples:

$('.slider').on('edge', function(event, slick, direction) {
  console.log(`Reached ${direction} edge`);
  
  // Visual feedback for edge
  $('.slider').addClass('edge-reached');
  setTimeout(() => $('.slider').removeClass('edge-reached'), 300);
  
  // Load more content when reaching right edge
  if (direction === 'right') {
    loadMoreSlides();
  }
  
  // Show navigation hints
  if (direction === 'left') {
    showNavigationHint('Try swiping right or using the next button');
  }
});

async function loadMoreSlides() {
  const newSlides = await fetchMoreSlides();
  newSlides.forEach(slide => {
    $('.slider').slick('slickAdd', slide);
  });
}

Responsive Events

Breakpoint Event

Fired when a responsive breakpoint is triggered.

/**
 * Fired when a responsive breakpoint is hit
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param breakpoint - Breakpoint value that was triggered
 */
$('.slider').on('breakpoint', function(event, slick, breakpoint) {
  // Responsive breakpoint triggered
});

Usage Examples:

$('.slider').on('breakpoint', function(event, slick, breakpoint) {
  console.log(`Breakpoint triggered: ${breakpoint}px`);
  
  // Update layout for new breakpoint
  updateLayoutForBreakpoint(breakpoint);
  
  // Adjust custom controls
  if (breakpoint < 768) {
    $('.desktop-only-controls').hide();
    $('.mobile-controls').show();
  } else {
    $('.desktop-only-controls').show();
    $('.mobile-controls').hide();
  }
  
  // Recalculate custom dimensions
  recalculateCustomDimensions();
});

Lazy Loading Events

Lazy Load Success

Fired when an image loads successfully via lazy loading.

/**
 * Fired when image loads successfully via lazy loading
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param image - jQuery object of loaded image
 * @param imageSource - Image source URL that was loaded
 */
$('.slider').on('lazyLoaded', function(event, slick, image, imageSource) {
  // Image loaded successfully
});

Lazy Load Error

Fired when an image fails to load via lazy loading.

/**
 * Fired when image fails to load via lazy loading
 * @param event - jQuery event object
 * @param slick - Slick instance object
 * @param image - jQuery object of failed image
 * @param imageSource - Image source URL that failed
 */
$('.slider').on('lazyLoadError', function(event, slick, image, imageSource) {
  // Image failed to load
});

Usage Examples:

$('.slider').on('lazyLoaded', function(event, slick, image, imageSource) {
  console.log('Image loaded:', imageSource);
  
  // Hide loading spinner
  image.siblings('.loading-spinner').remove();
  
  // Add loaded class for animations
  image.addClass('loaded');
  
  // Update progress counter
  updateLoadingProgress();
});

$('.slider').on('lazyLoadError', function(event, slick, image, imageSource) {
  console.error('Image failed to load:', imageSource);
  
  // Show error placeholder
  image.attr('src', '/images/placeholder-error.jpg');
  image.addClass('load-error');
  
  // Track loading errors
  analytics.track('image_load_error', {src: imageSource});
});

Event Chaining and Complex Interactions

// Multiple event handlers for complex workflows
$('.slider')
  .on('init', function(event, slick) {
    initializeCustomFeatures(slick);
  })
  .on('beforeChange', function(event, slick, currentSlide, nextSlide) {
    prepareSlideTransition(currentSlide, nextSlide);
  })
  .on('afterChange', function(event, slick, currentSlide) {
    completeSlideTransition(currentSlide);
  })
  .on('swipe', function(event, slick, direction) {
    handleSwipeGesture(direction);
  })
  .slick({
    autoplay: true,
    dots: true,
    responsive: [...]
  });

// Event-driven state management
class SliderStateManager {
  constructor(sliderSelector) {
    this.slider = $(sliderSelector);
    this.state = {
      currentSlide: 0,
      isPlaying: false,
      hasUserInteracted: false
    };
    
    this.bindEvents();
  }
  
  bindEvents() {
    this.slider
      .on('afterChange', (e, slick, currentSlide) => {
        this.state.currentSlide = currentSlide;
        this.updateUI();
      })
      .on('swipe', () => {
        this.state.hasUserInteracted = true;
        this.handleUserInteraction();
      });
  }
  
  updateUI() {
    // Update UI based on current state
  }
  
  handleUserInteraction() {
    // Handle user interaction logic
  }
}

Install with Tessl CLI