Thumbnail Slider
Introduction
A slider can sync with another slider by sync() method,
and isNaviation option makes the slider clickable for navigation.
By using these 2 features, we can make a slider with a thumbnail control like this:
This page explains how to create this kind of slider.
Thumbnail Slider
Let's start with the thumbnail slider.
<div id="thumbnail-slider" class="splide"> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide"> <img src="thumbnail01.jpg"> </li> <li class="splide__slide"> <img src="thumbnail02.jpg"> </li> <li class="splide__slide"> <img src="thumbnail03.jpg"> </li> </ul> </div> </div>
The thumbnail slider have to display multiple slides in a page.
Normally, we use the perPage option to define the number of slides,
but it's hard to determine the number from the perspective of responsibility even if using breakpoints.
To solve this problem, let's use fixedWidth option to fix the slide width against the window size.
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#thumbnail-slider', {
fixedWidth: 100,
gap : 10,
rewind : true,
pagination: false,
} ).mount();
} );
And then, we need to fit the thumbnail to the slide size.
We have 2 options to do this, one is adding CSS, and another is using the cover and fixedHeight options.
If all thumbnails have the same aspect ratio, the CSS way will work well:
.splide__slide img {
width: 100%;
height: auto;
}
If not, let's use the cover way:
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#thumbnail-slider', {
fixedWidth : 100,
fixedHeight: 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
} ).mount();
} );
Now the slider will be like this:
It looks pretty good for the thumbnail slider, but there are a few things to do:
- The user cannot tell which slide is selected
100pxis probably big for mobile devices- The active slide should be on the center if possible
If you are using the theme CSS, such as splide.min.css or splide-skyblue.min.css,
it emphasizes the active slide by adding a border style.
Otherwise, you have to style it manually by the is-active status class:
.splide__slide {
opacity: 0.3;
}
.splide__slide.is-active {
opacity: 1;
}
The breakpoints and focus options helps us to deal with the second and third problems.
Note that fixedHeight is not necessary if you are not using the cover option.
new Splide( '#thumbnail-slider', {
fixedWidth : 100,
fixedHeight: 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
focus : 'center',
breakpoints: {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} ).mount();
Next, we need to make slides clickable by setting the isNavigation option to true:
new Splide( '#thumbnail-slider', {
fixedWidth : 100,
fixedHeight : 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
isNavigation: true,
breakpoints : {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} ).mount();
Now the slider looks like this. Click a thumbnail, and you will see the slider moves:
To ignore small drag by a mouse, use the dragMinThreshold option.
Main Slider
This tutorial uses the following fade slider.
You have to assign a different ID, such as main-slider, or a class to grab it later by script.
This example disables arrows and pagination, but if you want to enable them, simply delete these options.
Sync
To sync the main slider to thumbnails, use the Splide#sync() method.
You must call it before mount().
var main = new Splide( '#main-slider', { ... } );
var thumbnails = new Splide( '#thumbnail-slider', { ... } );
main.sync( thumbnails );
main.mount();
thumbnails.mount();
That's all! 🎊 Here is the whole code of this tutorial:
document.addEventListener( 'DOMContentLoaded', function () {
var main = new Splide( '#main-slider', {
type : 'fade',
rewind : true,
pagination: false,
arrows : false,
} );
var thumbnails = new Splide( '#thumbnail-slider', {
fixedWidth : 100,
fixedHeight : 60,
gap : 10,
rewind : true,
pagination : false,
cover : true,
isNavigation: true,
breakpoints : {
600: {
fixedWidth : 60,
fixedHeight: 44,
},
},
} );
main.sync( thumbnails );
main.mount();
thumbnails.mount();
} );