Slider
Provides styles for slider and carousels.
Overview
The slider is styled with the class .slider. By default it will behave as
an slider component but it can also be used as a carousel, see Carousel.
Important note: If the sliders do not look well after loading the page, it
is because the gitbook left menu sidebar. Try collapsing the sidebar and
reloading the page again if necessary.
<div class="slider" data-ride="slider">
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
</div>
</div>
Carousel
The slider can also be used as a carousel using the data-type="carousel"
attribute on the .slider parent element.
<div class="slider" data-ride="slider" data-type="carousel">
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
</div>
</div>
Controls
The slider provides two types of controls, arrows and bullets. These can be
styles using .slider__arrows class for arrows and .slider__bullets for
bullets. The controls can also be hidden/shown for the different breakpoints
by using the configuration object (see Advanced usage). This example
is configured to show bullets on mobile and arrows on tablet and desktop.
<div class="slider" data-ride="slider"
data-config='{"bullets": false, "breakpoints": {"sm": {"arrows": false, "bullets": true}}}'>
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
</div>
</div>
Peeking
Some cases it is useful to show a portion of the next non-visible slide
to indicate there are more slides available to the user. This can be styled
by adding the modifier .slider--peeking class to the root .slider class.
<div class="slider slider--peeking" data-ride="slider" data-type="carousel" data-per-view="3">
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
<li class="slider__slide">4</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet" data-glide-dir="=3"></button>
</div>
</div>
Lazy
On cases where the slider loads lazy content like lazy images, the slider
will not show the content until it is initialized and that way provide a better
look and feel for lazy content. This can be done by adding the modifier
.slider--lazy class to the root .slider. The consumer of the slider molecule
is responsible to assign a min-height to the slider to improve it further.
Also, It is recommended to include the loader atom as a child of the
.slider root element.
<div class="slider slider--lazy" data-ride="slider" data-per-view="2">
<div class="slider__track" data-glide-el="track" style="min-height: 150px">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
<li class="slider__slide">4</li>
</ul>
<div class="loader loader--centered"><div></div><div></div><div></div></div>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet" data-glide-dir="=3"></button>
</div>
</div>
Per view move
The slider can be configured to show a given amount of slides on the view. By
default it will move one slide when using the arrow controls and one or many
slides when swipping (based on the swipe length). This can be changed to
move the per view amount of slides on each movement of the arrows or swipe
using the data-per-view-move="true" data attribute. When this option
is enabled, only the needed bullets are going to be shown to keep the
consistency of the movement.
<div class="slider slider--peeking" data-ride="slider" data-type="carousel" data-per-view="3" data-per-view-move="true">
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
<li class="slider__slide">4</li>
<li class="slider__slide">5</li>
<li class="slider__slide">6</li>
<li class="slider__slide">7</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet" data-glide-dir="=6"></button>
</div>
</div>
Advanced usage
The slider support the usage of different data attributes to personalize the
behavior of the slider component. It also provides the data-config attribute
that allows so send complex configurations as JSON objects.
Individual data attributes
Some data attributes availalbe are:
data-bound: Prevents empty space at the end of the slider.
Defaults to false. Eg: data-bound="true".data-per-view: A number of slides visible on the single viewport.
Defaults to 1. Eg: data-per-view="3".data-start-at: Start at specific slide number defined with zero-based index.
Defaults to 0. Eg: data-start-at="2".
Check oficial Glidejs page for more information about options.
https://glidejs.com/docs/options
<div class="slider" data-ride="slider" data-per-view="3" data-bound="true" data-start-at="2">
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
<li class="slider__slide">4</li>
<li class="slider__slide">5</li>
<li class="slider__slide">6</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet" data-glide-dir="=5"></button>
</div>
</div>
Configuration object
All the possible configuration options available can be passed to the slider
using the data-config attribute. This allos more complex configurations like
defining different configurations for different breakpoints.
It is required to use ' single quotes to define the value of this data
attribute since the " double quotes must be used to define the properties
and the values of the configuration JSON object.
Eg: data-config='{"type": "carousel"}'.
<div class="slider" data-ride="slider"
data-config='{"type": "carousel", "perView": 3, "bullets": false, "breakpoints": {"xs": {"perView": 1, "arrows": false, "bullets": true}, "sm": {"perView": 2}}}'>
<div class="slider__track" data-glide-el="track">
<ul class="slider__slides">
<li class="slider__slide">1</li>
<li class="slider__slide">2</li>
<li class="slider__slide">3</li>
<li class="slider__slide">4</li>
<li class="slider__slide">5</li>
<li class="slider__slide">6</li>
</ul>
</div>
<div class="slider__arrows" data-glide-el="controls">
<button class="slider__arrow slider__arrow--left icon-arrow-left" data-glide-dir="<"></button>
<button class="slider__arrow slider__arrow--right icon-arrow-right" data-glide-dir=">"></button>
</div>
<div class="slider__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet" data-glide-dir="=0"></button>
<button class="slider__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet" data-glide-dir="=5"></button>
</div>
</div>
Download
Get a bundle with all slider styles.
Download
Get a bundle with all slider Javascript.
Download
<p>Get a bundle with all slider styles.<br />
<a href="/styles/molecules/slider.css" download="cs-slider.css" target="_blank" class="btn btn--primary">Download</a></p>
<p>Get a bundle with all slider Javascript.<br />
<a href="/js/slider.min.js" download="cs-slider.min.js" target="_blank" class="btn btn--primary">Download</a></p>