Skip to main content
This guide will walk you through creating a fully functional Slick Carousel from scratch. By the end, you’ll have a responsive, touch-enabled carousel with navigation.
1

Set up your HTML file

Create a new HTML file with the basic structure and include the required dependencies from a CDN:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First 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"/>
    
    <!-- Basic styling -->
    <style>
        .slider {
            width: 80%;
            margin: 50px auto;
        }
        .slide {
            background: #3498db;
            color: white;
            padding: 100px 0;
            text-align: center;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
        .slide:nth-child(2) { background: #e74c3c; }
        .slide:nth-child(3) { background: #2ecc71; }
        .slide:nth-child(4) { background: #f39c12; }
    </style>
</head>
<body>
    <!-- Carousel markup goes here -->
    
    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
</body>
</html>
2

Add the carousel HTML markup

Create a container element with child elements for each slide:
<body>
    <div class="slider">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
        <div class="slide">Slide 4</div>
    </div>
    
    <!-- Scripts below -->
</body>
You can use any HTML structure inside each slide - images, text, videos, or complex layouts.
3

Initialize Slick with JavaScript

Add a script tag to initialize the carousel after the page loads:
<script>
    $(document).ready(function(){
        $('.slider').slick();
    });
</script>
That’s it! Your basic carousel is now working with default settings.
4

Customize with options (optional)

Enhance your carousel with configuration options:
<script>
    $(document).ready(function(){
        $('.slider').slick({
            dots: true,              // Show dot indicators
            infinite: true,          // Infinite looping
            speed: 500,              // Transition speed in ms
            slidesToShow: 1,         // Number of slides visible
            slidesToScroll: 1,       // Number of slides to scroll
            autoplay: true,          // Enable autoplay
            autoplaySpeed: 3000,     // Autoplay interval in ms
            arrows: true,            // Show prev/next arrows
            fade: false              // Use fade transition
        });
    });
</script>

​
Complete Working Example

Here’s a complete HTML file you can copy and run immediately: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First 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"/>
    
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
        }
        .slider {
            width: 80%;
            margin: 50px auto;
        }
        .slide {
            background: #3498db;
            color: white;
            padding: 100px 0;
            text-align: center;
            font-size: 24px;
        }
        .slide:nth-child(2) { background: #e74c3c; }
        .slide:nth-child(3) { background: #2ecc71; }
        .slide:nth-child(4) { background: #f39c12; }
        .slide:nth-child(5) { background: #9b59b6; }
    </style>
</head>
<body>
    <h1 style="text-align: center;">My First Slick Carousel</h1>
    
    <div class="slider">
        <div class="slide">Slide 1</div>
        <div class="slide">Slide 2</div>
        <div class="slide">Slide 3</div>
        <div class="slide">Slide 4</div>
        <div class="slide">Slide 5</div>
    </div>
    
    <!-- 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>
    
    <!-- Initialize Slick -->
    <script>
        $(document).ready(function(){
            $('.slider').slick({
                dots: true,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 3000
            });
        });
    </script>
</body>
</html>

​
Using Data Attributes

Starting from version 1.5, you can configure Slick using data attributes directly in your HTML: 
<div class="slider" data-slick='{"slidesToShow": 3, "slidesToScroll": 1, "dots": true}'>
    <div class="slide">Slide 1</div>
    <div class="slide">Slide 2</div>
    <div class="slide">Slide 3</div>
    <div class="slide">Slide 4</div>
    <div class="slide">Slide 5</div>
</div>

<script>
    $(document).ready(function(){
        $('.slider').slick();
    });
</script>
You still need to call $('.slider').slick() to initialize the carousel, even when using data attributes.
Here’s a practical example with images: 
<div class="image-slider">
    <div><img src="image1.jpg" alt="Image 1"></div>
    <div><img src="image2.jpg" alt="Image 2"></div>
    <div><img src="image3.jpg" alt="Image 3"></div>
    <div><img src="image4.jpg" alt="Image 4"></div>
</div>

<script>
    $(document).ready(function(){
        $('.image-slider').slick({
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 3,
            slidesToScroll: 1,
            responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 1
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
            ]
        });
    });
</script>

<style>
    .image-slider img {
        width: 100%;
        height: auto;
        display: block;
    }
</style>
Create a carousel that adapts to different screen sizes: 
$('.responsive-slider').slick({
    dots: true,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
        {
            breakpoint: 1024,
            settings: {
                slidesToShow: 3,
                slidesToScroll: 1,
                infinite: true,
                dots: true
            }
        },
        {
            breakpoint: 600,
            settings: {
                slidesToShow: 2,
                slidesToScroll: 1
            }
        },
        {
            breakpoint: 480,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
                arrows: false
            }
        }
    ]
});

​
Common Configuration Options

Here are the most commonly used options to get you started:
OptionTypeDefaultDescription
dotsbooleanfalseShow dot indicators
arrowsbooleantrueShow prev/next arrows
infinitebooleantrueInfinite loop sliding
speedint300Slide transition speed in milliseconds
slidesToShowint1Number of slides to show
slidesToScrollint1Number of slides to scroll
autoplaybooleanfalseEnable autoplay
autoplaySpeedint3000Autoplay speed in milliseconds
fadebooleanfalseEnable fade transition
centerModebooleanfalseCenter current slide
responsivearraynullBreakpoint-specific settings

​
Working with Events

Slick provides events you can listen to for custom functionality: 
// Initialize the slider
$('.slider').slick({
    dots: true,
    speed: 500
});

// Listen for slide change
$('.slider').on('afterChange', function(event, slick, currentSlide){
    console.log('Current slide:', currentSlide);
});

// Listen for before slide change
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
    console.log('Moving from slide', currentSlide, 'to slide', nextSlide);
});

// Listen for initialization
$('.slider').on('init', function(event, slick){
    console.log('Slider initialized!');
});
You can control the carousel programmatically using methods: 
// Go to next slide
$('.slider').slick('slickNext');

// Go to previous slide
$('.slider').slick('slickPrev');

// Go to specific slide (index starts at 0)
$('.slider').slick('slickGoTo', 2);

// Pause autoplay
$('.slider').slick('slickPause');

// Start autoplay
$('.slider').slick('slickPlay');

// Get current slide index
var currentSlide = $('.slider').slick('slickCurrentSlide');
console.log('Current slide:', currentSlide);

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

​
Troubleshooting

Add this CSS to ensure images display properly:
.slick-slide img {
    display: block;
    width: 100%;
    height: auto;
}
Make sure you’ve included slick-theme.css and the fonts folder is accessible:
<link rel="stylesheet" type="text/css" href="path/to/slick-theme.css"/>
This means Slick isn’t loaded properly. Check that:
  • jQuery is loaded before Slick
  • The Slick JavaScript file path is correct
  • There are no JavaScript errors preventing Slick from loading

​
Next Steps

Congratulations! You’ve created your first Slick Carousel. Here are some next steps:

Configuration Options

Explore all available configuration options to customize your carousel.

Methods & Events

Learn about methods for controlling your carousel and events for custom functionality.

Examples

Browse real-world examples and advanced use cases.

Styling Guide

Learn how to customize the appearance of your carousel.

Build docs developers (and LLMs) love

Get started for freeTalk to us