Carousel

Interactive slideshow for cycling through a series of content.

TailwindCSS

Vanilla JS

package showcase

import "github.com/axzilla/templui/internal/components/carousel"

templ CarouselDefault() {
	@carousel.Carousel(carousel.Props{
		Class: "rounded-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@CarouselSlide("Slide 1", "This is the first slide", "bg-blue-500")
			}
			@carousel.Item() {
				@CarouselSlide("Slide 2", "This is the second slide", "bg-green-500")
			}
			@carousel.Item() {
				@CarouselSlide("Slide 3", "This is the third slide", "bg-purple-500")
			}
		}
		@carousel.Previous()
		@carousel.Next()
		@carousel.Indicators(carousel.IndicatorsProps{
			Count: 3,
		})
	}
}

templ CarouselSlide(title, description, bg string) {
	<div class={ bg,"w-full h-96 flex items-center justify-center text-white" }>
		<div class="text-center">
			<h2 class="text-3xl font-bold mb-2">{ title }</h2>
			<p class="text-xl">{ description }</p>
		</div>
	</div>
}

Installation

Install the component
```
templui add carousel
```
Add the JavaScript to your layout
```
@carousel.Script()
```
Call this template in your base layout file (e.g., in the <head> section).

Examples

Autoplay

package showcase

import "github.com/axzilla/templui/internal/components/carousel"

templ CarouselAutoplay() {
	@carousel.Carousel(carousel.Props{
		Autoplay: true,
		Interval: 3000,
		Loop:     true,
		Class:    "rounded-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@CarouselAutoplaySlide("Slide 1", "This is the first slide", "bg-blue-500")
			}
			@carousel.Item() {
				@CarouselAutoplaySlide("Slide 2", "This is the second slide", "bg-green-500")
			}
			@carousel.Item() {
				@CarouselAutoplaySlide("Slide 3", "This is the third slide", "bg-purple-500")
			}
		}
		@carousel.Previous()
		@carousel.Next()
		@carousel.Indicators(carousel.IndicatorsProps{
			Count: 3,
		})
	}
}

templ CarouselAutoplaySlide(title, description, bg string) {
	<div class={ bg,"w-full h-96 flex items-center justify-center text-white" }>
		<div class="text-center">
			<h2 class="text-3xl font-bold mb-2">{ title }</h2>
			<p class="text-xl">{ description }</p>
		</div>
	</div>
}

Minimal

package showcase

import "github.com/axzilla/templui/internal/components/carousel"

templ CarouselMinimal() {
	@carousel.Carousel(carousel.Props{
		Interval: 2000,
		Autoplay: true,
		Loop:     true,
		Class:    "rounded-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@CarouselMinimalSlide("Slide 1", "This is the first slide", "bg-blue-500")
			}
			@carousel.Item() {
				@CarouselMinimalSlide("Slide 2", "This is the second slide", "bg-green-500")
			}
			@carousel.Item() {
				@CarouselMinimalSlide("Slide 3", "This is the third slide", "bg-purple-500")
			}
		}
	}
}

templ CarouselMinimalSlide(title, description, bg string) {
	<div class={ bg,"w-full h-96 flex items-center justify-center text-white" }>
		<div class="text-center">
			<h2 class="text-3xl font-bold mb-2">{ title }</h2>
			<p class="text-xl">{ description }</p>
		</div>
	</div>
}

With Images

package showcase

import (
	"github.com/axzilla/templui/internal/components/aspectratio"
	"github.com/axzilla/templui/internal/components/carousel"
)

templ CarouselWithImages() {
	@carousel.Carousel(carousel.Props{
		Autoplay: true,
		Interval: 5000,
		Loop:     true,
		Class:    "rounded-md overflow-hidden shadow-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@ImageSlide("/assets/img/demo/carousel-1.jpeg", "Image 1")
				<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4">
					<p>Nature landscape example 1</p>
				</div>
			}
			@carousel.Item() {
				@ImageSlide("/assets/img/demo/carousel-2.jpeg", "Image 2")
				<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4">
					<p>Nature landscape example 2</p>
				</div>
			}
			@carousel.Item() {
				@ImageSlide("/assets/img/demo/carousel-3.jpeg", "Image 3")
				<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4">
					<p>Nature landscape example 3</p>
				</div>
			}
		}
		@carousel.Previous()
		@carousel.Next()
		@carousel.Indicators(carousel.IndicatorsProps{
			Count: 3,
		})
	}
}

templ ImageSlide(src string, alt string) {
	@aspectratio.AspectRatio(aspectratio.Props{
		Ratio: aspectratio.RatioVideo,
	}) {
		<img
			src={ src }
			alt={ alt }
			class="w-full h-full object-cover"
		/>
	}
}

API Reference

Required parameter

Hover for description

Carousel

Main carousel container component for interactive slideshows.

Name	Type	Default
`ID` Unique identifier for the carousel element.	`string`	-
`Class` Additional CSS classes to apply to the carousel.	`string`	-
`Attributes` Additional HTML attributes to apply to the carousel element.	`templ.Attributes`	-
`Autoplay` Whether the carousel should automatically advance slides.	`bool`	`false`
`Interval` Time in milliseconds between automatic slide transitions.	`int`	`5000`
`Loop` Whether the carousel should loop back to the first slide after the last.	`bool`	`false`

Content

Container for carousel slides with smooth transitions.

Name	Type	Default
`ID` Unique identifier for the content element.	`string`	-
`Class` Additional CSS classes to apply to the content.	`string`	-
`Attributes` Additional HTML attributes to apply to the content element.	`templ.Attributes`	-

Item

Individual carousel slide container.

Name	Type	Default
`ID` Unique identifier for the item element.	`string`	-
`Class` Additional CSS classes to apply to the item.	`string`	-
`Attributes` Additional HTML attributes to apply to the item element.	`templ.Attributes`	-

Navigation button to go to the previous slide.

Name	Type	Default
`ID` Unique identifier for the previous button element.	`string`	-
`Class` Additional CSS classes to apply to the previous button.	`string`	-
`Attributes` Additional HTML attributes to apply to the previous button element.	`templ.Attributes`	-

Navigation button to go to the next slide.

Name	Type	Default
`ID` Unique identifier for the next button element.	`string`	-
`Class` Additional CSS classes to apply to the next button.	`string`	-
`Attributes` Additional HTML attributes to apply to the next button element.	`templ.Attributes`	-

Indicators

Dot indicators showing current slide position and allowing direct navigation.

Name	Type	Default
`ID` Unique identifier for the indicators element.	`string`	-
`Class` Additional CSS classes to apply to the indicators.	`string`	-
`Attributes` Additional HTML attributes to apply to the indicators element.	`templ.Attributes`	-
`Count` Number of indicator dots to display (should match number of slides).	`int`	-

Getting Started

Components

Carousel

Slide 1

Slide 2

Slide 3

Installation

Examples

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

API Reference

Carousel

Content

Item

Previous

Next

Indicators