Carousel

View Original

A carousel component for cycling through slides with images, text overlays, autoplay, touch support, and HTMX dynamic loading.

Goshtoso Component

Go + Templ

Default

With Text Overlay

With CTA Button

With Autoplay

Fixed Aspect Ratio (3:1)

With Touch / Swipe

Swipe left or right on touch devices

On Card

HTMX Dynamic Loading

Slides fetched from the server via HTMX on page load

Loading carousel...

Usage Example

// Default Carousel
@carousel.Carousel(carousel.Config{
    Slides: []carousel.Slide{
        {ImgSrc: "img1.webp", ImgAlt: "Slide 1"},
        {ImgSrc: "img2.webp", ImgAlt: "Slide 2"},
    },
})

// With Text Overlay
@carousel.Carousel(carousel.Config{
    Variant: carousel.WithText,
    Slides: []carousel.Slide{
        {ImgSrc: "img1.webp", ImgAlt: "...", Title: "Hello", Description: "World"},
    },
})

// With CTA Button
@carousel.Carousel(carousel.Config{
    Variant: carousel.WithCTA,
    Slides: []carousel.Slide{
        {ImgSrc: "img1.webp", ImgAlt: "...", Title: "Title", Description: "Desc", CTAUrl: "/link", CTAText: "Learn More"},
    },
})

// With Autoplay
@carousel.Carousel(carousel.Config{
    Autoplay: &carousel.AutoplayConfig{Interval: 4000},
    Variant:  carousel.WithText,
    Slides:   slides,
})

// Fixed Aspect Ratio (3:1)
@carousel.Carousel(carousel.Config{
    AspectRatio: "3/1",
    Slides:      slides,
})

// With Touch / Swipe
@carousel.Carousel(carousel.Config{
    Touch:  true,
    Slides: slides,
})

// On Card
@carousel.Carousel(carousel.Config{
    Variant: carousel.OnCard,
    Slides: []carousel.Slide{
        {ImgSrc: "img.webp", ImgAlt: "...", Title: "Product", Description: "$29.99"},
    },
})

// HTMX Dynamic Loading
@carousel.Carousel(carousel.Config{
    HTMX: &carousel.HTMXConfig{Get: "/api/components/carousel/slides"},
})

Card Spinner