Thumbnail Slider

The purpose of this tutorial is to create a slider with another slider containing thumbnails as navigation. You need to have finished setting up Splide before start.

Secondary Slider

Let’s start with a secondary slider containing thumbnails.

<div id="secondary-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 secondary slider should display multiple slides in a page. Normally, the number of slides is defined by perPage option, but it’s hard to determine the number of thumbnails from the perspective of responsibility even if utilizing breakpoints.

To solve this problem, let’s use fixedWidth option to fix a slide width against a window size.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#secondary-slider', {
		fixedWidth: 100,
		rewind    : true,
		gap       : 10,
		pagination: false,
	} ).mount();
} );

Although all slides will be made the same size, inner images will stick out of them, respecting each source image sizes.

Of course this is simply solved by a few styles:

.splide__slide img {
	width : 100%;
	height: auto;
}

Instead of adding CSS, it’s a also good idea to use cover option:

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#secondary-slider', {
		fixedWidth : 100,
		height     : 60,
		gap        : 10,
		rewind     : true,
		cover      : true,
		pagination : false,
	} ).mount();
} );

And you will get a slider like this:

The slider looks good for a thumbnail slider, but there are still a few things to be amelorated:

Users cannot tell which slide is active/selected
100px may be probably big for mobile devices
Active slides should be centered if possible

If you are using splide.min.css, the active slide in a navigation slider will be emphasized by border style. Otherwise, you should style the slide which has a is-active status class.

The breakpoints option helps you resolve the second problem. By defining following breakpoints, the slide width will be 66px while window width is under 600px.

Note that you should not give height if you don’t use 'cover' option.

var secondarySlider = new Splide( '#secondary-slider', {
	fixedWidth : 100,
	height     : 60,
	gap        : 10,
	rewind     : true,
	cover      : true,
	pagination : false,
	breakpoints : {
		'600': {
			fixedWidth: 66,
			height    : 40,
		}
	}
} ).mount();

Changing the focus option to 'center' solves the third problem:

var secondarySlider = new Splide( '#secondary-slider', {
	fixedWidth : 100,
	height     : 60,
	gap        : 10,
	rewind     : true,
	cover      : true,
	pagination : false,
	focus      : 'center',
	breakpoints : {
		'600': {
			fixedWidth: 66,
			height    : 40,
		}
	}
} ).mount();

The slider looks like this so far:

Finally, we need to make slides clickable. That can be achieved by setting a isNavigation option to true.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#secondary-slider', {
		fixedWidth  : 100,
		height      : 60,
		gap         : 10,
		cover       : true,
		isNavigation: true,
		focus       : 'center',
		breakpoints : {
			'600': {
				fixedWidth: 66,
				height    : 40,
			}
		},
	} ).mount();
} );

Nothing seems to be changed, but all slides will become clickable after the slider is synced with the primary one.

Primary Slider

There is no point mentioned specially about the primary slider. This tutorial uses the following simple slider with fade transition.

var primarySlider = new Splide( '#primary-slider', {
	type       : 'fade',
	heightRatio: 0.5,
	pagination : false,
	arrows     : false,
	cover      : true,
} );

Sync

At last, we need to connect the primary slider to the secondary one. This is achieved by a sync() method which must be called before mount():

var secondarySlider = new Splide( '#secondary-slider' ).mount();
var primarySlider = new Splide( '#primary-slider' );
primaryslider.sync( secondarySlider ).mount();

The following code shows the way to connect sliders to each other, providing all options mentioned in above sections.

document.addEventListener( 'DOMContentLoaded', function () {
	var secondarySlider = new Splide( '#secondary-slider', {
		fixedWidth  : 100,
		height      : 60,
		gap         : 10,
		cover       : true,
		isNavigation: true,
		focus       : 'center',
		breakpoints : {
			'600': {
				fixedWidth: 66,
				height    : 40,
			}
		},
	} ).mount();
	
	var primarySlider = new Splide( '#primary-slider', {
		type       : 'fade',
		heightRatio: 0.5,
		pagination : false,
		arrows     : false,
		cover      : true,
	} ); // do not call mount() here.
	
	primarySlider.sync( secondarySlider ).mount();
} );

Consequently, you will see like the following result.