Slick Slider

Use Slick Slider to create responsive, touch-enabled carousels with multiple slides, autoplay, and navigation options for your content.

Step 1: Install Slick Slider

You can install Slick via yarn.

yarn add slick-carousel

Step 2: Include Slick Slider link & Script

Add the Slick Slider CSS and JS files from your local libs folder:

<!-- slick-carousel css -->
<link rel="stylesheet" href="../assets/libs/slick-carousel/slick/slick-theme.css">
<link rel="stylesheet" href="../assets/libs/slick-carousel/slick/slick.css">

<!-- slick-carousel js -->
<script src="../assets/libs/slick-carousel/slick/slick.min.js"></script>

Step 3: Add HTML Structure

Create a .slider container with multiple slides inside. Each slide can contain images, cards, or any HTML content.

<div class="slider autoplay">
  <div>
    <div class="card mb-0">
      <img data-lazy src="..." class="img-fluid" alt="Image">
    </div>
  </div>
  <div>
    <div class="card mb-0">
      <img data-lazy src="..." class="img-fluid" alt="Image">
    </div>
  </div>
  <div>
    <div class="card mb-0">
      <img data-lazy src="..." class="img-fluid" alt="Image">
    </div>
  </div>
  <div>
    <div class="card mb-0">
      <img data-lazy src="..." class="img-fluid" alt="Image">
    </div>
  </div>
  <div>
    <div class="card mb-0">
      <img data-lazy src="..." class="img-fluid" alt="Image">
    </div>
  </div>
</div>

<!-- slick-carousel js (local) -->

Step 4: Initialize Slick with JS

Initialize the slider using jQuery. Below example shows an autoplay slider with 3 items visible at a time.

"use strict";

$(function () {
  $('.autoplay').slick({
    ...
  });
});