// For primitive components like `img`, the 'carousel-item' class must be added manually.
Carousel(
  [
    img(src: '...', alt: '...', classes: 'carousel-item'),
    img(src: '...', alt: '...', classes: 'carousel-item'),
    // ... more images
  ],
  style: [Effects.roundedBox],
)

Carousel(
  [ /* ... image items ... */ ],
  style: [Carousel.center, Effects.roundedBox],
)

Carousel(
  [ /* ... image items ... */ ],
  style: [Carousel.end, Effects.roundedBox],
)

// The smart `Carousel` automatically adds 'carousel-item' to deepyr `Container` children.
Carousel(
  [
    Container([img(src: '...')], style: [Size.wFull]),
    Container([img(src: '...')], style: [Size.wFull]),
    // ... more items
  ],
  style: [Size.w64, Effects.roundedBox],
)

Carousel(
  [
    Container([img(src: '...')], style: [Size.hFull]),
    Container([img(src: '...')], style: [Size.hFull]),
    // ... more items
  ],
  style: [Size.h96, Carousel.vertical, Effects.roundedBox],
)

Carousel(
  [
    Container([img(src: '...')], style: [Size.w1_2]),
    Container([img(src: '...')], style: [Size.w1_2]),
    // ... more items
  ],
  style: [Size.w96, Effects.roundedBox],
)

Container(
  [
    Carousel(
      [
        img(src: '...', classes: 'carousel-item rounded-box'),
        img(src: '...', classes: 'carousel-item rounded-box'),
        // ... more items
      ],
      // Use Spacing utilities for padding and gaps between items.
      style: [Carousel.center, Spacing.p4, Spacing.spaceX(4)],
    ),
  ],
  style: [Size.maxWmd, BgUtil.neutral, Effects.roundedBox],
)

Carousel(
  [
    Container([img(src: '...')], id: 'item1', style: [Size.wFull]),
    Container([img(src: '...')], id: 'item2', style: [Size.wFull]),
    // ... more items
  ],
  style: [Size.wFull],
),
Container(
  [
    // Use Button with tag: 'a' for styled links
    Button([text('1')], tag: 'a', attributes: {'href': '#item1'}, style: [Button.xs]),
    Button([text('2')], tag: 'a', attributes: {'href': '#item2'}, style: [Button.xs]),
    // ... more buttons
  ],
  style: [Layout.flex, Alignment.justifyCenter, Size.wFull, Spacing.py(2), Layout.gap(2)],
)

Carousel(
  [
    for (var i = 0; i < 4; i++)
      Container(
        [
          img(src: '...', classes: [Size.wFull].toClasses()),
          Container(
            [
              Button(
                [text('❮')],
                tag: 'a',
                attributes: {'href': '#slide${i == 0 ? 4 : i}'}, // Previous
                style: [Button.circle],
              ),
              Button(
                [text('❯')],
                tag: 'a',
                attributes: {'href': '#slide${i == 3 ? 1 : i + 2}'}, // Next
                style: [Button.circle],
              ),
            ],
            style: [Layout.flex, Alignment.justifyBetween],
            // Use `classes` for precise absolute positioning and transforms
            classes: 'absolute left-5 right-5 top-1/2 transform -translate-y-1/2',
          ),
        ],
        id: 'slide${i + 1}',
        // The parent item must be `relative` for absolute positioning to work
        style: [Position.relative, Size.wFull],
      ),
  ],
  style: [Size.wFull],
)