or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mddestruction.mdevent-handling.mdindex.mdnavigation.mdplayback-control.mdslide-management.md
tile.json

tessl/npm-slick-carousel

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/slick-carousel@1.8.x

To install, run

npx @tessl/cli install tessl/npm-slick-carousel@1.8.0

index.mddocs/

Slick Carousel

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.

Package Information

  • Package Name: slick-carousel
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install slick-carousel
  • Dependencies: jQuery >= 1.8.0

Core Imports

CDN (jsDelivr):

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.0/slick/slick-theme.css"/>

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

NPM/Webpack:

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel";

CommonJS:

require("slick-carousel/slick/slick.css");
require("slick-carousel/slick/slick-theme.css");
require("slick-carousel");

Basic Usage

// Initialize with default settings
$('.slider').slick();

// Initialize with custom settings
$('.slider').slick({
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 1,
  adaptiveHeight: true
});

// Using data attributes (HTML)
// <div class="slider" data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'>
//   <div><h3>Slide 1</h3></div>
//   <div><h3>Slide 2</h3></div>
// </div>
$('.slider').slick(); // Initialize sliders with data attributes

Architecture

Slick is built around several key components:

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

Capabilities

Initialization and Configuration

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

// Initialize carousel
$('.slider').slick(options);

// Get/set configuration options
$('.slider').slick('slickGetOption', 'speed');
$('.slider').slick('slickSetOption', 'speed', 1000, true);

Configuration

Navigation Control

Programmatic navigation methods for controlling slide movement and position.

// Navigate slides
$('.slider').slick('slickNext');
$('.slider').slick('slickPrev');
$('.slider').slick('slickGoTo', 2, false);

// Get current slide
var currentSlide = $('.slider').slick('slickCurrentSlide');

Navigation

Slide Management

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

// Add slides
$('.slider').slick('slickAdd', '<div>New slide</div>', 2, false);

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

// Filter slides
$('.slider').slick('slickFilter', '.active');
$('.slider').slick('slickUnfilter');

Slide Management

Playback Control

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

// Control autoplay
$('.slider').slick('slickPlay');
$('.slider').slick('slickPause');

Playback Control

Event Handling

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

// Bind to events
$('.slider').on('afterChange', function(event, slick, currentSlide){
  console.log('Changed to slide', currentSlide);
});

$('.slider').on('swipe', function(event, slick, direction){
  console.log('Swiped', direction);
});

Event Handling

Destruction and Cleanup

Methods for destroying carousel instances and cleaning up resources.

// Destroy carousel
$('.slider').slick('unslick');

Destruction

Core Types

// Main configuration options interface
interface SlickOptions {
  // Display options
  slidesToShow?: number;        // Default: 1
  slidesToScroll?: number;      // Default: 1
  infinite?: boolean;           // Default: true
  
  // Animation options
  speed?: number;               // Default: 500
  fade?: boolean;               // Default: false
  cssEase?: string;             // Default: 'ease'
  
  // Navigation options
  arrows?: boolean;             // Default: true
  dots?: boolean;               // Default: false
  
  // Autoplay options
  autoplay?: boolean;           // Default: false
  autoplaySpeed?: number;       // Default: 3000
  
  // Interaction options
  draggable?: boolean;          // Default: true
  swipe?: boolean;              // Default: true
  touchMove?: boolean;          // Default: true
  
  // Responsive options
  responsive?: ResponsiveOption[];
  mobileFirst?: boolean;        // Default: false
  
  // Accessibility options
  accessibility?: boolean;      // Default: true
  
  // Advanced options
  centerMode?: boolean;         // Default: false
  variableWidth?: boolean;      // Default: false
  vertical?: boolean;           // Default: false
  rtl?: boolean;               // Default: false
  lazyLoad?: 'ondemand' | 'progressive'; // Default: 'ondemand'
}

// Responsive breakpoint configuration
interface ResponsiveOption {
  breakpoint: number;
  settings: SlickOptions | 'unslick';
}

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