Moon liveview storybook Moon Liveview Storybook

Carousel

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub
Attribute Type Documentation Default Value
class :string

CSS class for the parent carousel element
""
rest :global

Additional attributes for the carousel
Required id * :string

ID for the carousel element. Required
active_item :integer

Index of the currently active slide
0
hide_controls :boolean

Defines whether or not the pagination has arrows
false
start_arrow :slot
Show slot attributes Hide slot attributes
class :string

CSS class for the start arrow
end_arrow :slot
Show slot attributes Hide slot attributes
class :string

CSS class for the end arrow
carousel_item :slot
Show slot attributes Hide slot attributes 
<:carousel_item>
  <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
    1
  </div>
</:carousel_item>
<:carousel_item>
  <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
    2
  </div>
</:carousel_item>
<:carousel_item>
  <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
    3
  </div>
</:carousel_item>
<:carousel_item>
  <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
    4
  </div>
</:carousel_item>
<:carousel_item>
  <div class="flex items-center justify-center h-space-160 w-72 bg-brand-subtle text-brand">
    5
  </div>
</:carousel_item>