Carousel
Horizontal scrolling list.
github.com/fastygo/templ/ui
Horizontal scrolling list.
Default
Slide 1
Slide 2
Slide 3
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Group(ui.GroupProps{Class: "flex gap-2 overflow-x-auto max-w-md"}) {
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Slide 1")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Slide 2")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Slide 3")
}
}
}
import "github.com/fastygo/templ/ui"
templ Example() {
@ui.Group(ui.GroupProps{Class: "flex gap-2 overflow-x-auto max-w-md"}) {
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Slide 1")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Slide 2")
}
@ui.Box(ui.BoxProps{Class: "min-w-[8rem] shrink-0 rounded-lg border border-border bg-card p-4 text-sm"}) {
@ui.Text(ui.TextProps{}, "Slide 3")
}
}
}API
Group · Group — Horizontal flex row