How to Create a Carousel in Next.js Using Slick-Carousel

A carousel is a popular feature on many modern websites, allowing users to easily scroll through multiple images, products, or testimonials. When building a Next.js project, one of the easiest and most flexible ways to implement a carousel is by using the Slick-Carousel library. In this article, we will walk through the process of creating a responsive image carousel in Next.js using the react-slick library, which is a React wrapper for the popular Slick-Carousel jQuery plugin.

Step 1: Install the Necessary Dependencies

You need to install react-slick and slick-carousel in your Next.js project. Open your terminal and navigate to your project directory, then run the following command:

npm install react-slick slick-carousel

Step 2: Create the Carousel Component

Now, create a new component, say testimonial.tsx, where you will define the carousel functionality.

"use client";

import Image from "next/image";
import db from "@/db/testimonial.json";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const Testimonials = () => {
  return (
    <Slider {...settings}>
      {db.testimonial.map((tm: testimonial, i: number) => {
        return (
          <aside key={i} className="p-4">
            <div className="p-8 rounded-lg bg-darkGray bg-opacity-10 shadow-md flex flex-col items-center justify-center">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 559.27 546.15"
                className="w-10 h-10 fill-green"
              >
                <path d="M336.63,250.54V33.44H553.71v217.1S587.7,503,364.37,512.71V392s85.76,35.63,74.55-141.49Z" />
                <path d="M3.71,250.54V33.44H220.79v217.1S254.78,503,31.46,512.71V392S117.21,427.66,106,250.54Z" />
              </svg>
              <p className="text-base text-darkGray text-center mt-6 mb-8">
                {tm.message}
              </p>
              <Image
                src={`/${tm.img}`}
                alt={tm.name}
                width={80}
                height={80}
                className="rounded-full mb-4"
              />
              <h3 className="text-center text-lg text-black">
                {tm.name}
                <br />
                <small className="text-green font-medium text-sm">
                  {tm.location}
                </small>
              </h3>
            </div>
          </aside>
        );
      })}
    </Slider>
  );
};

export default Testimonials;

Step 3: Use the Carousel Component in a Page

Once you’ve created the testimonial component, you can use it in any of your Next.js pages.

<section className="py-20">
        <div className="container mx-auto px-4">
          <h2 className="text-6xl font-bold text-darkGray mb-3 uppercase">
            Testimonials{" "}
            <span className="inline-block bg-green w-40 h-1 ml-2"></span>
          </h2>
          <p className="text-sm text-darkGray w-full max-w-[750px]">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
            ab nemo, excepturi cupiditate corrupti ad quod optio. Eveniet
            excepturi.
          </p>
          <div className="mt-5">
            <Testimonials />
          </div>
        </div>
</section>

Step 4: Customize the Carousel’s Appearance

If you want to customize the carousel behavior for different screen sizes, you can add the responsive option in the settings object. For example:

const settings = {
  dots: true,
  infinite: true,
  speed: 500,
  autoplay: true,
  autoplaySpeed: 5000,
  arrows: false,
  slidesToShow: 4,
  slidesToScroll: 1,
  responsive: [
    {
      breakpoint: 1280,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 1279,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1,
      },
    },
    {
      breakpoint: 640,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    },
  ],
};

The default Slick-Carousel comes with a built-in theme, but you can always customize the appearance using your own CSS.

Conclusion

Using react-slick to create a carousel in your Next.js project is quick, easy, and highly customizable. With its built-in functionalities such as autoplay, responsive design, and dot navigation, you can create a carousel that fits your specific project needs. You can further extend it by customizing the styles, adding animations, and even adding thumbnails or video slides for a richer experience.