Sliders

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

<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 grid column classes on the slide <li> elements.

<div class="slider" data-arrows="true" data-paging="true">
	<ul class="slides">
		<li class="col-sm-6">...</li>
		<li class="col-sm-6">...</li>
		<li class="col-sm-6">...</li>
	</ul>
</div>
					

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