קרוסלת קובייה
השקופיות יושבות על פאות של קובייה תלת-ממדית שמסתובבת לבאה. מעבירים בכפתורים, בגרירה או אוטומטית.
התאמה
faceColor
edgeColor
מבוסס על Box Carousel (MIT רישיון) · תנאי שימוש
עוד ב-Pro
לכל הרכיביםמאפיינים
18 מאפיינים| מאפיין | סוג | ברירת מחדל | תיאור |
|---|---|---|---|
| items | { id: string; type: 'image' | 'video'; src: string; alt?: string; poster?: string }[] | — | שקופיות: תמונות או וידאו. |
| width | number | 280 | רוחב הקובייה, בפיקסלים. |
| height | number | 200 | גובה הקובייה, בפיקסלים. |
| direction | 'top' | 'bottom' | 'left' | 'right' | "left" | לאיזה כיוון הקובייה מסתובבת. |
| perspective | number | 600 | עומק הפרספקטיבה: נמוך יותר תלת-ממד חזק יותר. |
| autoPlay | boolean | false | להעביר שקופיות אוטומטית. |
| autoPlayInterval | number | 3000 | הפסקה בין מעברים אוטומטיים, במילישניות. |
| enableDrag | boolean | true | לאפשר סיבוב בגרירה. |
| dragSensitivity | number | 0.5 | כמה הקובייה מסתובבת לכל פיקסל גרירה. |
| transition | ValueAnimationOptions | "{ duration: 1.25, ease: [0.953, 0.001, 0.019, 0.995] }" | אנימציית הסיבוב לבא ולקודם. |
| snapTransition | ValueAnimationOptions | "{ type: 'spring', damping: 30, stiffness: 200 }" | איך הקובייה מתייצבת אחרי גרירה. |
| dragSpring | { stiffness?: number; damping?: number; mass?: number } | "{ stiffness: 200, damping: 30 }" | קפיץ בזמן גרירה. |
| debug | boolean | false | להדגיש את פאות הקובייה לניפוי באגים. |
| onIndexChange | (index: number) => void | — | נקרא כשהשקופית מתחלפת. |
| ref | { next(): void; prev(): void; getCurrentItemIndex(): number } | — | שליטה בקרוסלה מהקוד. |
| faceColor | string | "#171717" | רקע פאות הקובייה, נראה מאחורי מדיה שקופה או בטעינה. |
| edgeColor | string | "rgba(255, 255, 255, 0.1)" | קו דק סביב כל פאה. |
| className | string | — | מחלקות נוספות. |
תלויות
3 חבילות נדרשות
npm install motion clsx tailwind-merge