Here you can find a carousel made only of Shadcn/UI components, unlike the default one using Embla
How to use it (Next.js):
Make sure you have already installed the following SHADCN/UI components:
- Button or type
npx shadcn-ui@latest add button
in your terminal - Dialog or
npx shadcn-ui@latest add dialog
- Scroll-Area or
npx shadcn-ui@latest add scroll-area
- Skeleton or
npx shadcn-ui@latest add skeleton
Another requirement is to have the images to place in the carousel
For the snippet, I used 9 images (image1, image2... image9) placed in the public/images folder
This tutorial doesn't cover how to connect images from a database
Let's create the carousel:
Open the snippet and click the Copy button
Go to your code editor and paste the snippet in a Carousel component and place it where you want
You should now see the component in your page
In order to customize some elements like the scroll bar background and thumb, you should go directly in the shadcn component
app/components/ui/
Find the scroll area component for example and open it
Find: <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-small bg-border bg-emerald-600" />
In the class name you can customize the thumb. I have already added text-emerald-500
to make it green
That's all for this tutorial!
Remember to scroll down in the footer, find your favourite social, and follow me there!