mardi, septembre 25, 2018
[stack_hero image= »38″]

Sliders

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack’s modular elements
at the Element Index Page →

[/stack_hero]
[vc_section css= ».vc_custom_1498220966521{padding-top: 0px !important;} » ebor_docs= » »]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Basic Slider Markup

Sliders in Stack use the premium Flickity plugin and work by housing an unordered list .slides inside a div with class .slider

There are a number of data attribute options to customise the behaviour of the slider:

  • data-arrows= »true || false » – enable navigation arrows
  • data-paging= »true || false » – enable navigation dots
  • data-autoplay= »true || false » – enable auto-paging of the slider
  • data-timing= »NUM » – millisecond value before slider scrolls
[/stack_boxed_content]
[stack_slider image= »235,14,227,228″]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Adjust Slide Widths

You can adjust slide widths by using the Bootstrap grid column classes on the slide li elements.

[/stack_boxed_content]
[stack_slider paging= »true » column= »6″ image= »235,14,227,228″]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Slider Effects

Easily modify the behaviour of the slider by adding the following classes to the .slider element.

  • .slider–ken-burns – adds subtle ‘Ken Burns’effect on slide image
[/stack_boxed_content]
[stack_slider image= »235,14,227,228″ custom_css_class= »slider–ken-burns »]
[/vc_section]

Looking for styled sliders and carousels?

View Slider Sections

or try the admin demo ↗