Images Slider
Full-bleed image slider with fade/slide transitions and overlay text support.
Preview
Images Slider
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Hero sections with rotating images and product showcases.
Why this component matters
A slider shows multiple visuals without requiring scroll, maximizing above-the-fold impact.
Usage guidance
Use with 3-5 high-quality full-bleed images. Auto-advance every 5-7 seconds. Include navigation dots and swipe support.
Installation
bash
npx shadcn@latest add @aceternity/images-sliderUsage
example.tsxtsx
import { ImagesSlider } from "@/components/ui/images-slider";
export default function Example() {
return (
<ImagesSlider>
{/* Your content here */}
</ImagesSlider>
);
}Source
images-slider.tsx
components/ui/images-slider.tsx