How to create a Slick slider using JavaScript?

Slick Slider is a powerful jQuery plugin used to create responsive and customizable carousels.
To create a Slick slider using JavaScript, include jQuery and Slick’s CSS/JS files in your project.
Wrap your content (images or HTML) inside a container with a unique class.
Use JavaScript (jQuery) to initialize the slider with desired options like autoplay, arrows, and dots.
It supports features like responsive breakpoints, lazy loading, and multiple slides display.

Step-by-Step: Create Slick Slider in JS

1. Include Slick Carousel CSS & JS

In your <head> section, add the CSS:

index.html

Example



<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>

And before </body>, add jQuery and Slick JS:

index.html

Example



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

2. HTML Structure

index.html

Example


<div class="your-slider">
  <div><img src="image1.jpg" alt="Slide 1"></div>
  <div><img src="image2.jpg" alt="Slide 2"></div>
  <div><img src="image3.jpg" alt="Slide 3"></div>
</div>

You can put any HTML inside each <div> (images, text, etc.).

3. Initialize Slick in JavaScript

Put this inside <script> or in a .js file after jQuery and Slick are loaded:

Example


$(document).ready(function(){
  $('.your-slider').slick({
    dots: true,
    arrows: true,
    infinite: true,
    speed: 500,
    autoplay: true,
    autoplaySpeed: 3000,
    slidesToShow: 1,
    slidesToScroll: 1
  });
});

4. Optional: Add Slick Theme CSS (for styling dots/arrows)

index.html

Example


<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>

Advanced Options

Option	Description
`fade: true`	Fades instead of sliding
`slidesToShow`	Number of slides shown at once
`responsive`	Mobile responsiveness settings

Example:

Happy Coders