shadcn-templ

Carousel

A carousel with motion and swipe built using Alpine.js.

1
2
3
4
5
templ
templ CarouselDemo() {
	<div class="flex items-center justify-center p-8">
		<div class="w-full max-w-xs">
			@ui.CarouselRoot(5, "", nil) {
				@ui.CarouselContent("", nil) {
					for _, n := range []int{1, 2, 3, 4, 5} {
						@ui.CarouselItem("", nil) {
							<div class="p-1">
								<div class="flex aspect-square items-center justify-center rounded-xl border bg-muted p-6">
									<span class="text-4xl font-semibold">{ fmt.Sprintf("%d", n) }</span>
								</div>
							</div>
						}
					}
				}
				@ui.CarouselPrevious("", nil)
				@ui.CarouselNext("", nil)
			}
		</div>
	</div>
}