Article Categories

Selected Reading

Adding a Carousel to Your Site with Slick.js

Javascript Web Development Front End Technology

In this tutorial, we will demonstrate how to use Slick.js to create responsive carousels for your websites. We'll start with a basic image carousel and then explore various customization options to enhance its functionality.

If you try to create a carousel without using any libraries, it will be quite time-consuming. To reduce the effort and add multiple types of carousels with different properties, you can use Slick.js.

Slick.js is a widely used jQuery plugin that allows us to create responsive carousels with multiple attributes and different properties.

Features of Slick.js

There are multiple reasons why Slick.js is the perfect choice for carousels:

Fully responsive carousel that adapts to different screen sizes
Scales with its container automatically
Separate settings for different breakpoints
Optional CSS3 transitions
Desktop mouse dragging support
Infinite looping capability

Setting Up Slick.js

To use Slick.js, you need to include the required CSS and JavaScript files. The easiest way is to use CDN links:

<!-- CSS files in head -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />

<!-- JavaScript files before closing body -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Creating a Basic Carousel

Here's a complete example of a basic image carousel using Slick.js:

<!DOCTYPE html>
<html>
<head>
   <title>Slick Carousel - Example</title>
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
   <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
   <style>
      body {
         font-family: Arial, sans-serif;
         margin: 0;
         padding: 20px;
         background-color: #f5f5f5;
      }
      .carousel {
         width: 90%;
         max-width: 800px;
         margin: 0 auto;
      }
      .carousel div {
         padding: 10px;
         text-align: center;
      }
      .carousel img {
         width: 100%;
         height: 200px;
         object-fit: cover;
         border-radius: 8px;
         box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }
      h2 {
         text-align: center;
         color: #333;
      }
   </style>
</head>
<body>
   <h2>Slick Carousel Example</h2>
   <div class="carousel">
      <div>
         <img src="/javascript/images/javascript-mini-logo.jpg" alt="JavaScript">
         <p>JavaScript</p>
      </div>
      <div>
         <img src="/java/images/java-mini-logo.jpg" alt="Java">
         <p>Java</p>
      </div>
      <div>
         <img src="/html/images/html-mini-logo.jpg" alt="HTML">
         <p>HTML</p>
      </div>
      <div>
         <img src="/css/images/css-mini-logo.jpg" alt="CSS">
         <p>CSS</p>
      </div>
      <div>
         <img src="/python/images/python-mini.jpg" alt="Python">
         <p>Python</p>
      </div>
   </div>

   <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
   <script>
      $(document).ready(function() {
         $('.carousel').slick({
            slidesToShow: 2,
            slidesToScroll: 1,
            autoplay: true,
            autoplaySpeed: 3000
         });
      });
   </script>
</body>
</html>

Adding Navigation Dots

You can add navigation dots to allow users to jump to specific slides:

$('.carousel').slick({
   slidesToShow: 2,
   slidesToScroll: 1,
   dots: true,
   dotsClass: 'slick-dots',
   autoplay: true,
   autoplaySpeed: 3000
});

Common Configuration Options

Here are the most commonly used Slick.js options:

Option	Description	Default
`slidesToShow`	Number of slides to show at once	1
`slidesToScroll`	Number of slides to scroll at once	1
`autoplay`	Enable auto-scrolling	false
`autoplaySpeed`	Auto-scroll speed in milliseconds	3000
`dots`	Show navigation dots	false
`arrows`	Show navigation arrows	true
`infinite`	Enable infinite looping	true

Responsive Configuration

You can configure different settings for different screen sizes using the responsive option:

$('.carousel').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   autoplay: true,
   responsive: [
      {
         breakpoint: 768,
         settings: {
            slidesToShow: 2
         }
      },
      {
         breakpoint: 480,
         settings: {
            slidesToShow: 1
         }
      }
   ]
});

Advanced Features

Slick.js also supports advanced features like:

Fade transitions: Use fade: true for smooth fade effects
Variable width slides: Set variableWidth: true for different slide widths
Center mode: Use centerMode: true to center the active slide
Lazy loading: Enable lazyLoad: 'ondemand' for better performance

Conclusion

Slick.js provides a powerful and flexible solution for creating responsive carousels with minimal effort. Its extensive configuration options and responsive features make it ideal for modern web development.

Mukul Latiyan

Updated on: 2026-03-15T23:19:00+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next