Carousel

Interactive slideshow for cycling through a series of content.

Source Tailwind CSS JavaScript

Slide 1

This is the first slide

Slide 2

This is the second slide

Slide 3

This is the third slide

package showcase

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

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

templ CarouselSlide(title, description string) {
	@card.Card() {
		@card.Content() {
			<div class={ "w-full h-96 flex items-center justify-center" }>
				<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).

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`	-

Menu

Getting Started

Components

Carousel

Slide 1

Slide 2

Slide 3

Installation

API Reference

Carousel

Content

Item

Previous

Next

Indicators