Carousel

A responsive image and content carousel with navigation controls.

Basic Usage

dart
1
2
3
4
5
6
7
DCarousel(
  items: [
    DCarouselItem(image: '/slides/slide1.jpg', alt: 'First slide'),
    DCarouselItem(image: '/slides/slide2.jpg', alt: 'Second slide'),
    DCarouselItem(image: '/slides/slide3.jpg', alt: 'Third slide'),
  ],
)

With Custom Content

dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
DCarousel(
  items: [
    DCarouselItem(
      content: div(classes: 'bg-gradient-to-r from-blue-500 to-purple-600 h-64 flex items-center justify-center', [
        h2(classes: 'text-white text-3xl font-bold', [Component.text('Welcome')]),
      ]),
    ),
    DCarouselItem(
      content: div(classes: 'bg-gradient-to-r from-green-500 to-teal-600 h-64 flex items-center justify-center', [
        h2(classes: 'text-white text-3xl font-bold', [Component.text('Features')]),
      ]),
    ),
  ],
)

Without Arrows

dart
1
2
3
4
5
6
7
DCarousel(
  showArrows: false,
  items: [
    DCarouselItem(image: '/slide1.jpg'),
    DCarouselItem(image: '/slide2.jpg'),
  ],
)

Without Dots

dart
1
2
3
4
5
6
7
DCarousel(
  showDots: false,
  items: [
    DCarouselItem(image: '/slide1.jpg'),
    DCarouselItem(image: '/slide2.jpg'),
  ],
)

Minimal Controls

dart
1
2
3
4
5
6
7
8
DCarousel(
  showArrows: false,
  showDots: false,
  items: [
    DCarouselItem(image: '/slide1.jpg'),
    DCarouselItem(image: '/slide2.jpg'),
  ],
)

API Reference

DCarousel

Prop Type Default Description
items List<DCarouselItem> required Carousel items
showArrows bool true Show navigation arrows
showDots bool true Show dot indicators
autoPlay bool false Auto-advance slides
autoPlayInterval int 5000 Auto-play interval (ms)
classes String? null Custom CSS classes

DCarouselItem

Prop Type Default Description
image String? null Image URL
alt String? null Image alt text
content Component? null Custom content