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 →
Basic Slider Markup
Sliders in Stack use the premium Flickityplugin and work by housing an unordered list .slidesinside 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
<div class="slider" data-arrows="true"> <ul class="slides"> <li>...</li> <li>...</li> <li>...</li> </ul></div>
Adjust Slide Widths
You can adjust slide widths by using the Bootstrap gridcolumn classes on the slide <li>elements.
<div class="slider" data-arrows="true" data-paging="true"> <ul class="slides"> <li class="col-md-6">...</li> <li class="col-md-6">...</li> <li class="col-md-6">...</li> </ul></div>
Slider Effects
Easily modify the behaviour of the slider by adding the following classes to the .sliderelement.
- .slider--ken-burns- adds subtle 'Ken Burns'effect on slide image