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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/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/[email protected]/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.