Elements – Sliders

[vc_row full_width=”stretch_row”][vc_column][stack_hero image=”38″][vc_column_text]

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 →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section css=”.vc_custom_1498220966521{padding-top: 0px !important;}” ebor_docs=””][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

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

[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”1/2″][stack_slider image=”235,14,227,228″][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

Adjust Slide Widths

You can adjust slide widths by using the Bootstrap grid column classes on the slide li elements.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”1/2″][stack_slider paging=”true” column=”6″ image=”235,14,227,228″][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=”.vc_custom_1485825445121{margin-bottom: 30px !important;}”][vc_column width=”1/2″][stack_boxed_content padding=”boxed–lg” background=”bg–secondary”][vc_column_text]

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

[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=”1/2″][stack_slider image=”235,14,227,228″ custom_css_class=”slider–ken-burns”][/vc_column][/vc_row][/vc_section][vc_row][vc_column][vc_column_text]

Looking for styled sliders and carousels?

View Slider Sections

or try the admin demo ↗

[/vc_column_text][/vc_column][/vc_row]