sunweb

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

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Loading...

Properties


c-slider items="3"

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

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
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

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Loading...

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

Disable the slider for certain breakpoints

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Loading...

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

Slide automatically with defined timing.

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

c-slider luminosity="dark"

Lighter controls for dark content.

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Loading...

c-slider loop="false"

Disable loop functionality. Enabled by default.

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

c-slider center="true"

Enable center functionality. Disabled by default.

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Loading...

c-slider outerNavigation="true"

Move controls out from component. Disabled by default.

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

c-slider outerButtons="true"

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

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

c-slider barNavigation="true"

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

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

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

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

c-slider stretch="true"

Handlebars

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

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
c-slider with video

Video in second position

Handlebars

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Loading...