Apple Cards Carousel
A sleek and minimal carousel implementation, as seen on apple.com
Get to know your iSad.
Installation
Run the following command
npx shadcn@latest add https://ui.aceternity.com/registry/apple-cards-carousel.jsonAdd useOutsideClick hook
import React, { useEffect } from "react";
export const useOutsideClick = (
ref: React.RefObject<HTMLDivElement>,
callback: Function
) => {
useEffect(() => {
const listener = (event: any) => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
callback(event);
};
document.addEventListener("mousedown", listener);
document.addEventListener("touchstart", listener);
return () => {
document.removeEventListener("mousedown", listener);
document.removeEventListener("touchstart", listener);
};
}, [ref, callback]);
};Examples
Standard
Get to know your iSad.
With Layout Changes
Get to know your iSad.
Props
Carousel Component
| Prop | Type | Default | Description |
|---|---|---|---|
| items | JSX.Element[] | Required | Array of JSX elements to be displayed in the carousel |
| initialScroll | number | 0 | Initial scroll position of the carousel |
Card Component
| Prop | Type | Default | Description |
|---|---|---|---|
| card | Card | Required | Object containing card details (src, title, category, content) |
| index | number | Required | Index of the card in the carousel |
| layout | boolean | false | Whether to use layout animations |
BlurImage Component
| Prop | Type | Default | Description |
|---|---|---|---|
| height | number | string | - | Height of the image |
| width | number | string | - | Width of the image |
| src | string | Required | Source URL of the image |
| className | string | - | Additional CSS classes for the image |
| alt | string | "Background of a beautiful view" | Alt text for the image |
| ...rest | ImageProps | - | Any other props accepted by Next.js Image component |
Note: The Card type is defined as:
type Card = {
src: string;
title: string;
category: string;
content: React.ReactNode;
};Build websites faster and 10x better than your competitors with Aceternity UI Pro
With the best in class components and templates, stand out from the crowd and get more attention to your website. Trusted by founders and entrepreneurs from all over the world.
Excellent communication and professionalism from the start and
throughout. Happily and calmly accepted and entertained a few additional
out-of-scope requests as well. Good open-...
Henrik Söderlund
Former CTO at Creme Digital