LayoutCSS Docs Showcase
  • Showcase

    • components

  • Area
  • Box
  • Center
  • Extender
  • Grid
  • Icon
  • Ledge
  • Outsider
  • Rack
  • Sidebar
  • Slider
  • Stack
  • Switcher

    • Utilities

  • align-self
  • bg-img
  • flex
  • font-size
  • h
  • hide
  • line-height
  • p-child
  • p-recursive
  • p
  • ratio
  • relative
  • w
  • z-index

    • Slider-l

    ...

    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.

    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.