useAutoSlide
useAutoScale
useAutoFade
tsx
import { useAutoSlide, useAutoScale, useAutoFade } from "@hua-labs/hua/framework";
// Auto-sliding carousel
const autoSlide = useAutoSlide({
interval: 3000,
itemCount: 4,
pauseOnHover: true,
});
// Auto-scaling pulse
const autoScale = useAutoScale({
minScale: 1,
maxScale: 1.1,
duration: 1000,
});
// Auto-fading crossfade
const autoFade = useAutoFade({
duration: 1500,
items: ['Item 1', 'Item 2', 'Item 3'],
});Slide 1
Slide 2
Slide 3
Slide 4
useAutoSlide Options
| interval | number | 3000 | |
| itemCount | number | - | |
| pauseOnHover | boolean | true | |
| loop | boolean | true |
useAutoScale Options
| minScale | number | 1 | |
| maxScale | number | 1.1 | |
| duration | number | 1000 |
useAutoFade Options
| duration | number | 1500 | |
| items | ReactNode[] | - | |
| crossfade | boolean | true |