Images Slider
A full page slider with images that can be navigated with the keyboard.
Installation
Run the following command
npx shadcn@latest add @aceternity/images-sliderProps
| Prop | Type | Default | Description |
|---|---|---|---|
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. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
