The Slider

<slider-l layout="item-width:200px height:200px gap:2 hide-bar">...</slider-l>

The slider is… a slider ! 😅

You can set its height, the with of its elements, a gap between them and you can choose to hide the scrollbar.

When to use ?

You want to create a slider/carousel with elements of same width.

Attributes

• item-width : the width of child elements.
• height : the height of the slider component.
• gap : the space between child elements.
• hide-bar : hide the scroll bar.

item-width

To ensure all slider elements have the same width, simply set the item-width attribute.

To define the slider’s height, use the height attribute.

item-width in %

When you use a percentage value for item-width, each element’s width is defined as a percentage of the slider’s visible width.

Add a gap to space the elements, it looks nicer! 😎

hide-bar

The hide-bar attribute makes the scrollbar invisible.

This can be useful when creating a carousel that relies solely on buttons for switching between elements.