āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/aceternity/components/images-slider ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
A full page slider with images that can be navigated with the keyboard.
features, product, special
npx shadcn@latest add @aceternity/images-slider
Run the following command:
npx shadcn@latest add @aceternity/images-slider
| Prop | Type | Description | Default Value |
| :--- | :--- | :--- | :--- |
| images | string[] | - | An array of image URLs to be displayed in the slider. |
| children | React.ReactNode | - | Any React nodes that will be rendered inside the slider. |
| overlay | React.ReactNode | true | If true, an overlay will be displayed on the images. |
| overlayClassName | string | - | The CSS class name to be applied to the overlay. |
| className | string | - | The CSS class name to be applied to the slider. |
| autoplay | boolean | true | If true, the slider will automatically move to the next image every 5 seconds. |
| direction | "up" | "down" | "up" | The direction of the transition when changing images. |
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā