carousel.ts
1.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
export default {
"slots": {
"root": "relative focus:outline-none",
"viewport": "overflow-hidden",
"container": "flex items-start",
"item": "min-w-0 shrink-0 basis-full",
"controls": "",
"arrows": "",
"prev": "absolute rounded-full",
"next": "absolute rounded-full",
"dots": "absolute inset-x-0 -bottom-7 flex flex-wrap items-center justify-center gap-3",
"dot": [
"cursor-pointer size-3 bg-accented rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-primary",
"transition"
]
},
"variants": {
"orientation": {
"vertical": {
"container": "flex-col -mt-4",
"item": "pt-4",
"prev": "top-4 sm:-top-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90",
"next": "bottom-4 sm:-bottom-12 left-1/2 -translate-x-1/2 rotate-90 rtl:-rotate-90"
},
"horizontal": {
"container": "flex-row -ms-4",
"item": "ps-4",
"prev": "start-4 sm:-start-12 top-1/2 -translate-y-1/2",
"next": "end-4 sm:-end-12 top-1/2 -translate-y-1/2"
}
},
"active": {
"true": {
"dot": "data-[state=active]:bg-inverted"
}
}
}
}