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:
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.