Slider

component slider image slider

Definition

Slider component wraps some in-lined items in a single gesture friendly container, which overflows horizontally, and present in the viewport a subset of them. It helps users on display a group of related information and focusing only in some, saving vertical spacing. Every slide item, could handle images, or any other content based on HTML.

c-slider

Handlebars

Razor

Open in new tab

Loading...

Properties

c-slider items="3"

The number of items in the viewport. By default 1.

Handlebars

Razor

Open in new tab

Loading...

c-slider responsive="xs:1,sm:2,sml:3,lg:4,xxl:5"

The number of items in the viewport, for every breakpoint.

Handlebars

Razor

Open in new tab

Loading...

c-slider responsive="xs:1,sm:3,sml:disable,lg:4"

Disable the slider for certain breakpoints

Handlebars

Razor

Open in new tab

Loading...

c-slider autoplay="true" autoplay-timeout="3000"

Slide automatically with defined timing.

c-slider luminosity="dark"

Lighter controls for dark content.

Handlebars

Razor

Open in new tab

Loading...

c-slider loop="false"

Disable loop functionality. Enabled by default.

c-slider center="true"

Enable center functionality. Disabled by default.

Handlebars

Razor

Open in new tab

Loading...

c-slider outerNavigation="true"

Move controls out from component. Disabled by default.

c-slider outerButtons="true"

Move buttons out from component, but keep navigation dots inside. Disabled by default.

c-slider barNavigation="true"

Changes dot indicator/control by a bar. Disabled by default.

c-slider withGradient="true"

Add small gradient for overflowed content. Disabled by default. Only applies when outerNavigation is enabled. Is better to combine with some gutter

c-slider stretch="true"

Slider item 1

Slider item 2

This is a really long text...That forces the sliders to grow in height.

Lorem ipsum dolor sit amet, te est putent vocent apeirian, tota fugit cu vel, est quis impetus sententiae no. Mazim iusto dicunt vim id, eam ex modo commodo repudiare. Duis graeco eum et. Id est amet zril reprimique. Utroque luptatum evertitur his eu, sed eripuit antiopam conclusionemque et, eu dolorem molestie sit. Simul sanctus pri no, apeirian deterruisset his ei. Simul choro tantas eu vel.

Vis in iracundia sadipscing
Duo ea alii rebum reprimique
Cu sumo nostro senserit eum
Sed eu nibh mutat, at fabulas iracundia sit

Vis in iracundia sadipscing
Duo ea alii rebum reprimique
Cu sumo nostro senserit eum
Sed eu nibh mutat, at fabulas iracundia sit

c-slider with video

Video in second position

Handlebars

Razor

Open in new tab

Loading...