Documentation Index
Fetch the complete documentation index at: https://mintlify.com/kenwheeler/slick/llms.txt
Use this file to discover all available pages before exploring further.
Installation Methods
Slick Carousel can be installed in several ways depending on your project setup and preferences.
Remember that Slick requires jQuery 1.7 or higher as a peer dependency.
Package Managers
npm install slick-carousel
// Import Slick CSS
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
// Import Slick JS (assumes jQuery is already available)
import 'slick-carousel/slick/slick.min.js';
CDN Installation
For quick prototyping or if you prefer not to use a build process, you can load Slick directly from a CDN.
jsDelivr CDN (Recommended)
Add CSS to your <head> section
Include the Slick CSS files. The slick.css file is required, while slick-theme.css provides default styling for arrows and dots.<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
Add jQuery before Slick
Slick requires jQuery to function. Add jQuery before the Slick script:<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Add Slick JavaScript before closing </body> tag
Include the Slick JavaScript file:<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
Complete CDN Setup
Here’s a complete HTML template with all CDN links in the correct order:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slick Carousel</title>
<!-- Slick CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
</head>
<body>
<!-- Your content here -->
<!-- jQuery (required) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Slick JavaScript -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
</body>
</html>
Alternative CDN: cdnjs
You can also use cdnjs as an alternative:
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
<!-- JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Direct Download
You can download Slick Carousel directly from the GitHub repository:
Extract the files
Extract the downloaded archive to your project directory.
Include the required files
Link to the CSS and JavaScript files in your HTML:<link rel="stylesheet" type="text/css" href="path/to/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="path/to/slick/slick-theme.css"/>
<script type="text/javascript" src="path/to/slick/slick.min.js"></script>
Required Files
At minimum, you need:
slick.css - Core carousel styles (required)slick.min.js - Core carousel functionality (required)- jQuery 1.7+ (required)
Optional but recommended:
slick-theme.css - Default styling for arrows, dots, and loading indicatorsfonts/ folder - Icon fonts used by the default theme (required if using slick-theme.css)
Verifying Installation
To verify that Slick is installed correctly, open your browser’s console and type:
If Slick is loaded properly, you should see a function definition rather than undefined.
Next Steps
Now that you have Slick installed, you’re ready to create your first carousel!
Quick Start Guide
Follow our step-by-step guide to build your first Slick Carousel in minutes.