lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
46 lines • 2.09 kB
TypeScript
export interface StylishCarouselItem {
src: string;
title?: string;
alt?: string;
}
export interface StylishCarouselProps {
/** Array of items to display in the carousel */
items: StylishCarouselItem[];
/** Starting active index (0-based) */
initialIndex?: number;
/** Size of each slide (CSS clamp value or fixed px). Defaults to responsive clamp. */
slideSize?: string;
/** Rotation angle (degrees) applied per offset position */
rotationDegrees?: number;
/** Scale of non-active slides (0–1). Defaults to 0.6 */
inactiveScale?: number;
/** Y-offset multiplier for perspective fan-out. Defaults to 50 */
yOffsetPercent?: number;
/** Spring animation bounce (0–1). Defaults to 0.15 */
springBounce?: number;
/** Spring animation duration in seconds. Defaults to 0.8 */
springDuration?: number;
/** Whether to show navigation arrows */
showArrows?: boolean;
/** Whether to show dot indicators */
showDots?: boolean;
/** Whether images are clickable to navigate to that slide */
clickToNavigate?: boolean;
/** Auto-advance interval in ms. 0 = disabled */
autoPlay?: number;
/** Additional className for the root wrapper */
className?: string;
/** Callback fired when the active index changes */
onIndexChange?: (index: number) => void;
/** Border radius of each slide image. Defaults to "1rem" */
borderRadius?: string;
/** Custom dot active color (Tailwind or CSS color) */
dotActiveColor?: string;
/** Custom dot inactive color */
dotInactiveColor?: string;
/** Custom arrow button class override */
arrowClassName?: string;
}
declare const StylishCarousel: ({ items, initialIndex, slideSize, rotationDegrees, inactiveScale, yOffsetPercent, springBounce, springDuration, showArrows, showDots, clickToNavigate, autoPlay, className, onIndexChange, borderRadius, arrowClassName, }: StylishCarouselProps) => import("react/jsx-runtime").JSX.Element | null;
export default StylishCarousel;
//# sourceMappingURL=stylish-carousel.d.ts.map