background

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 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>
					
  • Image
  • Image
  • Image

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>
					
  • Image
  • Image
  • Image
  • Image

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
.slider--ken-burns:
  • Image
  • Image
  • Image

Looking for styled sliders and carousels?

View Slider Sections