Build amazing sites with this great collection of componentsBuy Now

Collapsibles

Slider

The slider is actually very similar, if not the same, as a caroussel.

Cards can be used to set items apart and or to attract attention to them. They should be easy to scan for relevant and actionable information. Cards are also great for presenting different content hamonously.


Slider

The basic concept of shadow and depth is build right into Materialize. If you want to 'raise' an element simply add one of the 'z-depth' classes and the shadow will be added.

The .z-depth-1 class at the least elevation, the z-depth-5 class the most. So why are there 6 elevated boxes below? In Site Designer, simply click on the second one and look at the value in the class input to find out!

A simple and elegant image carousel. You can also have captions that will be transitioned on their own depending on their alignment. You can also have indicators that show up on the bottom of the slider.

You customize certain options inside the html: element. indicators Boolean true Set to false to hide slide indicators.
height Number 400 Set height of slider.
duration Number 500 Set the duration of the transition animation in ms.
interval Number 6000 Set the duration between transitions in ms.

  • Placeholder Picture

    Slide 1

  • Placeholder Picture

    Heading Level 3

  • Heading Level 3

    Placeholder Picture