How to Use Carousel Slider in Shadcn UI with Next.js

In this tutorial, we’ll see how to use Carousel Slider using Next.js and Shadcn UI.

The carousel component is built using the Embla Carousel library. So you need to install it.

npx shadcn-ui@latest add carousel

Also if you are using card component you need to install Shadcn UI Card.

npx shadcn-ui@latest add card

1. Creating a Carousel Slider in Next.js Using Shadcn UI and Embla Carousel library.

import * as React from "react"

import { Card, CardContent } from "@/components/ui/card"
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel"

export default function CarouselDemo() {
  return (
    <Carousel className="w-full lg:max-w-xs">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <span className="text-4xl font-semibold">{index + 1}</span>
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

2. Card Carousel Slider with images using Shadcn UI and Next.js.

import * as React from "react";

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

export default function CarouselDemo() {
  // Generate random image URLs
  const getRandomImageUrl = () => {
    const randomImageWidth = Math.floor(Math.random() * 800) + 400; // Random width between 400 and 1200
    const randomImageHeight = Math.floor(Math.random() * 800) + 400; // Random height between 400 and 1200
    return `https://via.placeholder.com/${randomImageWidth}x${randomImageHeight}`;
  };

  return (
    <Carousel className="w-full lg:max-w-xs m-96">
      <CarouselContent>
        {Array.from({ length: 5 }).map((_, index) => (
          <CarouselItem key={index}>
            <div className="p-1">
              <Card>
                <CardContent className="flex aspect-square items-center justify-center p-6">
                  <img
                    src={getRandomImageUrl()}
                    alt={`Random Image ${index + 1}`}
                    className="w-full h-full object-cover"
                  />
                </CardContent>
              </Card>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

3. Shadcn UI and Next.js Carousel Slider with dot indicator.

'use client'

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";


const images = [
  "https://via.placeholder.com/1200x400?text=Slide%201",
  "https://via.placeholder.com/1200x400?text=Slide%202",
  "https://via.placeholder.com/1200x400?text=Slide%203",
  "https://via.placeholder.com/1200x400?text=Slide%204",
  "https://via.placeholder.com/1200x400?text=Slide%205",
];

export default function CarouselDemo() {
  const [activeIndex, setActiveIndex] = useState(0);

  const nextSlide = () => {
    setActiveIndex((prevIndex) =>
      prevIndex === images.length - 1 ? 0 : prevIndex + 1
    );
  };

  const prevSlide = () => {
    setActiveIndex((prevIndex) =>
      prevIndex === 0 ? images.length - 1 : prevIndex - 1
    );
  };

  return (
    <div className="w-full lg:max-w-5xl mx-auto">
      <Carousel className="relative">
        <CarouselContent
          style={{
            transform: `translateX(-${activeIndex * 100}%)`,
            transition: "transform 0.5s ease-in-out",
          }}
        >
          {images.map((image, index) => (
            <CarouselItem key={index}>
              <div className="p-1">
                <Card>
                  <CardContent className="aspect-banner">
                    <img
                      src={image}
                      alt={`Slide ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious onClick={prevSlide} />
        <CarouselNext onClick={nextSlide} />
      </Carousel>
      <div className="flex justify-center mt-4">
        {images.map((_, index) => (
          <span
            key={index}
            onClick={() => setActiveIndex(index)}
            className={`w-4 h-4 mx-2 cursor-pointer rounded-full ${index === activeIndex ? "bg-indigo-500" : "bg-gray-400"
              }`}
          ></span>
        ))}
      </div>
    </div>
  );
}

Aaronn