Documentation Showcase Donations Github Discord Login Sign up

Components

Utilities

Fonts

Showcase

Donations

Login

Sign up

Github

Discord

Components

Utilities

Fonts

The Slider

...

The Slider is a component that lets you define a fixed height and width to elements that will be placed inline. Therefore you can easily create a carrousel for your pictures

  • 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.

Examples

Here we defined the slider's height at 200px and item-width at 250px, try to change these 2 values in the example bellow.

In this example we set a item-width value in percentage, in this case each element take 25% of the visible width. We use a gap set to 1 to space elements between them.

If you add the attribute `hide-bar` you can see that the scroll bar is not visible anymore. It can be usefull if you want to create a carousel with left and right arrow as the only way to navigate between elements.