AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonButton GroupCalendarCardCarouselChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDirectionDrawerDropdown MenuEmptyFieldHover CardInputInput GroupInput OTPItemKbdLabelMenubarNative SelectNavigation MenuPaginationPopoverProgressRadio GroupResizableScroll AreaSelectSeparatorSheetSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography
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>
}