Smooth Slider
Fully customizable slider component with smooth and satisfying hover animations.
Examples
Implementation of smooth slider with Anime catalog
Popular Anime
Solo Leveling
2024 · 1 season · Crunchyroll
Solo Leveling
Ishura
2024 · 1 season · Crunchyroll
Ishura
The Apothecary Diaries
2023 · 2 seasons · Crunchyroll
The Apothecary Diaries
Zenshu
2023 · 1 season · Netflix
Zenshu
Sakamoto Days
2024 · 1 season · Crunchyroll
Sakamoto Days
Dr. Stone
2019 · 3 seasons · Crunchyroll
Dr. Stone
Unnamed Memory
2024 · 1 season · Crunchyroll
Unnamed Memory
I Got Married to the Male Lead
2024 · 1 season · Crunchyroll
I Got Married to the Male Lead
Customized catalog of Anime
Custom Cards
I Got Married to the Male Lead
2024 · 1 season · Crunchyroll
I Got Married to the Male Lead
Unnamed Memory
2024 · 1 season · Crunchyroll
Unnamed Memory
Dr. Stone
2019 · 3 seasons · Crunchyroll
Dr. Stone
Sakamoto Days
2024 · 1 season · Crunchyroll
Sakamoto Days
Zenshu
2023 · 1 season · Netflix
Zenshu
Installation
npx shadcn@latest add "https://aetherui.in/c/smooth-slider.json"
Component Props
You can customize the content of the smooth-slider by passing the following props to the component.
AnimatedSlider Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | Title of the slider. | |
| children | ReactNode | Content to be displayed inside the slider. | |
| className | string | (none) | Additional class names to be applied to the slider. |
| gap | number (Optional) | 16 | Gap between the cards. |
| scrollAmount | number (Optional) | 300 | Scroll amount of the slider. |
| ...props | any | Additional props to be passed to the slider. |
AnimatedCard Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content to be displayed inside the card. | |
| className | string | (none) | Additional class names to be applied to the card. |
| defaultWidth | string (Optional) | 180px | Default width of the card. |
| expandedWidth | string (Optional) | 320px | Expanded width of the card. |
| height | string (Optional) | 270px | Height of the card. |
| transitionDuration | string (Optional) | 0.4s | Transition duration of the card. |
| transitionEasing | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) | ease | Transition easing of the card. |
| ...props | any | Additional props to be passed to the card. |
CardContent Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content to be displayed inside the card. | |
| className | string | (none) | Additional class names to be applied to the card. |
| defaultAspectRatio | string (Optional) | aspect-[2/3] | Default aspect ratio of the card. |
| expandedAspectRatio | string (Optional) | aspect-video | Expanded aspect ratio of the card. |
| ...props | any | Additional props to be passed to the card. |
OnHover Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content to be displayed inside the card. | |
| className | string | (none) | Additional class names to be applied to the card. |
| fadeInDuration | string (Optional) | 0.3s | Fade in duration of the card. |
| ...props | any | Additional props to be passed to the card. |
DefaultView Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | Content to be displayed inside the card. | |
| className | string | none | Additional class names to be applied to the card. |
| ...props | any | Additional props to be passed to the card. |