Carousel

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof CarouselPrimitive.ItemGroup> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<CarouselPrimitive.ItemGroup
12  data-slot="carousel-content"
13  class={cn(
14    "flex min-w-0 flex-1 overflow-hidden rounded-lg [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
15    className
16  )}
17  {...rest}
18>
19  {@render children?.()}
20</CarouselPrimitive.ItemGroup>
21

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof CarouselPrimitive.Control> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<CarouselPrimitive.Control
12  data-slot="carousel-control"
13  class={cn(
14    "flex items-center justify-center gap-2 data-[orientation=vertical]:flex-col",
15    className
16  )}
17  {...rest}
18>
19  {@render children?.()}
20</CarouselPrimitive.Control>
21

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof CarouselPrimitive.IndicatorGroup> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<CarouselPrimitive.IndicatorGroup
12  data-slot="carousel-indicator-group"
13  class={cn("flex justify-center gap-2 data-[orientation=vertical]:flex-col", className)}
14  {...rest}
15>
16  {@render children?.()}
17</CarouselPrimitive.IndicatorGroup>
18

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof CarouselPrimitive.Indicator> {}
7
8let { class: className, ...rest }: Props = $props()
9</script>
10
11<CarouselPrimitive.Indicator
12  data-slot="carousel-indicator"
13  class={cn(
14    "size-2.5 cursor-pointer rounded-full border-0 bg-muted-foreground/30 p-0 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-current:bg-primary",
15    className
16  )}
17  {...rest}
18/>
19

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import CarouselIndicator from "./carousel-indicator.svelte"
4import CarouselIndicatorGroup from "./carousel-indicator-group.svelte"
5import type { ComponentProps } from "svelte"
6
7interface Props extends Omit<ComponentProps<typeof CarouselPrimitive.Indicator>, "index"> {}
8
9let { ...rest }: Props = $props()
10</script>
11
12<CarouselPrimitive.Context>
13  {#snippet render(api)}
14    <CarouselIndicatorGroup>
15      {#each api().pageSnapPoints as _, index (index)}
16        <CarouselIndicator index={index} {...rest} />
17      {/each}
18    </CarouselIndicatorGroup>
19  {/snippet}
20</CarouselPrimitive.Context>
21

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof CarouselPrimitive.Item> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<CarouselPrimitive.Item
12  data-slot="carousel-item"
13  class={cn("min-w-0 shrink-0 grow-0 basis-full", className)}
14  {...rest}
15>
16  {@render children?.()}
17</CarouselPrimitive.Item>
18

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { Button } from "@/components/ui/button"
4import { cn } from "@/lib/utils"
5import { ChevronRightIcon } from "lucide-svelte"
6import type { ComponentProps } from "svelte"
7
8interface Props extends ComponentProps<typeof Button> {}
9
10let {
11  class: className,
12  children,
13  variant = "outline",
14  size = "icon-sm",
15  ...rest
16}: Props = $props()
17</script>
18
19<CarouselPrimitive.NextTrigger>
20  {#snippet asChild(props)}
21    <Button
22      data-slot="carousel-next"
23      {variant}
24      {size}
25      class={cn("touch-manipulation rounded-full disabled:opacity-50", className)}
26      {...props()}
27      {...rest}
28    >
29      {#if children}
30        {@render children()}
31      {:else}
32        <ChevronRightIcon class="cn-rtl-flip size-4" />
33      {/if}
34      <span class="sr-only">Next slide</span>
35    </Button>
36  {/snippet}
37</CarouselPrimitive.NextTrigger>
38

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { Button } from "@/components/ui/button"
4import { cn } from "@/lib/utils"
5import { ChevronLeftIcon } from "lucide-svelte"
6import type { ComponentProps } from "svelte"
7
8interface Props extends ComponentProps<typeof Button> {}
9
10let {
11  class: className,
12  children,
13  variant = "outline",
14  size = "icon-sm",
15  ...rest
16}: Props = $props()
17</script>
18
19<CarouselPrimitive.PrevTrigger>
20  {#snippet asChild(props)}
21    <Button
22      data-slot="carousel-previous"
23      {variant}
24      {size}
25      class={cn("touch-manipulation rounded-full disabled:opacity-50", className)}
26      {...props()}
27      {...rest}
28    >
29      {#if children}
30        {@render children()}
31      {:else}
32        <ChevronLeftIcon class="cn-rtl-flip size-4" />
33      {/if}
34      <span class="sr-only">Previous slide</span>
35    </Button>
36  {/snippet}
37</CarouselPrimitive.PrevTrigger>
38

1<script lang="ts">
2import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel"
3import { cn } from "@/lib/utils"
4import type { ComponentProps } from "svelte"
5
6interface Props extends ComponentProps<typeof CarouselPrimitive.Root> {}
7
8let {
9  children,
10  class: className,
11  spacing = "1rem",
12  loop = false,
13  ...rest
14}: Props = $props()
15</script>
16
17<CarouselPrimitive.Root
18  data-slot="carousel"
19  {spacing}
20  {loop}
21  class={cn(
22    "relative flex w-full flex-col gap-4 data-[orientation=vertical]:flex-row",
23    className
24  )}
25  {...rest}
26>
27  {@render children?.()}
28</CarouselPrimitive.Root>
29

1import { Carousel as CarouselPrimitive } from "@sprawlify/svelte/carousel";23export { default as Carousel } from "./carousel.svelte";4export { default as CarouselContent } from "./carousel-content.svelte";5export { default as CarouselItem } from "./carousel-item.svelte";6export { default as CarouselControl } from "./carousel-control.svelte";7export { default as CarouselPrevious } from "./carousel-previous.svelte";8export { default as CarouselNext } from "./carousel-next.svelte";9export { default as CarouselIndicatorGroup } from "./carousel-indicator-group.svelte";10export { default as CarouselIndicator } from "./carousel-indicator.svelte";11export { default as CarouselIndicators } from "./carousel-indicators.svelte";1213export const CarouselAutoplayTrigger = CarouselPrimitive.AutoplayTrigger;14export const CarouselContext = CarouselPrimitive.Context;15export const CarouselRootProvider = CarouselPrimitive.RootProvider;16