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:

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09
  • Sample Thumbnail 01
  • Sample Thumbnail 02
  • Sample Thumbnail 03
  • Sample Thumbnail 04
  • Sample Thumbnail 05
  • Sample Thumbnail 06
  • Sample Thumbnail 07
  • Sample Thumbnail 08
  • Sample Thumbnail 09

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>
HTML

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();
} );
JavaScript

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;
}
CSS

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();
} );
JavaScript

Now the slider will be like this:

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09

It looks pretty good for the thumbnail slider, but there are a few things to do:

  • The user cannot tell which slide is selected
  • 100px is 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;
}
CSS

The breakpoints option and focus option 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();
JavaScript

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();
JavaScript

Now the slider looks like this. Click a thumbnail, and you will see the slider moves:

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09

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.

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03
  • Sample Slide 04
  • Sample Slide 05
  • Sample Slide 06
  • Sample Slide 07
  • Sample Slide 08
  • Sample Slide 09

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();
JavaScript

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();
} );
JavaScript