Const
Base Carousel
A versatile carousel component for displaying scrollable content blocks with navigation controls.
<umd-element-carousel>
blocks
left-button
true
false
right-button
mobile-hint
hint
data-theme
light
dark
tablet-size
desktop-size
tablet-count
desktop-count
max-count
grid-gap-pixels
resize
<umd-element-carousel> <div slot="blocks"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div></umd-element-carousel> Copy
<umd-element-carousel> <div slot="blocks"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div></umd-element-carousel>
1.0.0
Base Carousel
A versatile carousel component for displaying scrollable content blocks with navigation controls.
Custom Element
<umd-element-carousel>
Slots
blocks
- Container for carousel items (required, accepts: any element)Attributes
left-button
- Left navigation button visibility:true
- Show left navigation button (default)false
- Hide left navigation buttonright-button
- Right navigation button visibility:true
- Show right navigation button (default)false
- Hide right navigation buttonmobile-hint
- Mobile swipe hint visibility:true
- Show mobile swipe hint (default)false
- Hide mobile swipe hinthint
- Navigation hint visibility:true
- Show navigation hint (default)false
- Hide navigation hintdata-theme
- Visual theme:light
- Light theme (default)dark
- Dark themetablet-size
- Number of visible items on tabletdesktop-size
- Number of visible items on desktoptablet-count
- Total item count for tablet viewdesktop-count
- Total item count for desktop viewmax-count
- Maximum number of items to displaygrid-gap-pixels
- Gap between items in pixelsObserved Attributes
resize
- Triggers carousel size recalculation