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],
)