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 →
PromoSimple is a simple online giveaway maker. Connect it to your Social Accounts and Email Tools. Kick back and watch your lists grow. Click here to get started.
[stack_hero image=”38″]
[/stack_hero]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
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_slider image=”235,14,227,228″]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Adjust Slide Widths
You can adjust slide widths by using the Bootstrap grid column classes on the slide li elements.
[stack_slider paging=”true” column=”6″ image=”235,14,227,228″]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
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_slider image=”235,14,227,228″ custom_css_class=”slider–ken-burns”]