better-auth/examples/svelte-kit-example/src/lib/components/ui/carousel/carousel-content.svelte

<script lang="ts">
import type { HTMLAttributes } from "svelte/elements";
import emblaCarouselSvelte from "embla-carousel-svelte";
import { getEmblaContext } from "./context.js";
import { cn } from "$lib/utils.js";

type $$Props = HTMLAttributes<HTMLDivElement>;

let className: string | undefined | null = undefined;
export { className as class };

const { orientation, options, plugins, onInit } = getEmblaContext(
	"<Carousel.Content/>",
);
</script>

<div
	class="overflow-hidden"
	use:emblaCarouselSvelte={{
		options: {
			container: "[data-embla-container]",
			slides: "[data-embla-slide]",
			...$options,
			axis: $orientation === "horizontal" ? "x" : "y",
		},
		plugins: $plugins,
	}}
	on:emblaInit={onInit}
>
	<div
		class={cn("flex", $orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
		data-embla-container=""
		{...$$restProps}
	>
		<slot />
	</div>
</div>