[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?
or try the admin demo ↗
[/vc_column_text][/vc_column][/vc_row]