CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-slick-carousel

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/slick-carousel@1.8.x
Publish Source
CLI
Badge
tessl/npm-slick-carousel badge