日本語

Thumbnail Carousel

Introduction

A carousel can sync with another carousel by sync() method, and isNaviation option makes the carousel clickable for navigation. By using these 2 features, we can make a carousel 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 carousel.

Let's start with the thumbnail carousel.

<section
  id="thumbnail-carousel"
  class="splide"
  aria-label="The carousel with thumbnails. Selecting a thumbnail will change the Beautiful Gallery carousel."
>
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="thumbnail01.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="thumbnail02.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="thumbnail03.jpg" alt="">
			</li>
		</ul>
  </div>
</section>
HTML

The thumbnail carousel 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 to fix the slide width against the window size.

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

And then, we need to fit the thumbnail to the slide dimension. If all thumbnails have the same aspect ratio, the following CSS is sufficient:

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

If not, let's use object-fit to cover up each slide with a thumbnail (IE does not support this property!). To make it work, we need to set fixedHeight:

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#thumbnail-carousel', {
		fixedWidth : 100,
    fixedHeight: 60,
		gap        : 10,
		rewind     : true,
		pagination : false,
  } ).mount();
} );
JavaScript

...and apply the property to thumbnails:

.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
CSS

Now the carousel 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, but there are a few things we should consider:

  • 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.6;
}


.splide__slide.is-active {
  opacity: 1;
}
CSS

The breakpoints and focus options help us to deal with the second and third problems. If you are not using object-fit, fixedHeight is not necessary.

new Splide( '#thumbnail-carousel', {
  fixedWidth : 100,
  fixedHeight: 60,
  gap        : 10,
  rewind     : true,
  pagination : false,
  focus      : 'center',
  breakpoints: {
    600: {
      fixedWidth : 60,
      fixedHeight: 44,
    },
  },
} ).mount();
JavaScript

Next, we need to make slides clickable by setting isNavigation to true:

new Splide( '#thumbnail-carousel', {
  fixedWidth  : 100,
  fixedHeight : 60,
  gap         : 10,
  rewind      : true,
  pagination  : false,
  isNavigation: true,
  breakpoints : {
    600: {
      fixedWidth : 60,
      fixedHeight: 44,
    },
  },
} ).mount();
JavaScript

Note that the thumbnail carousel should not have pagination, or otherwise accessibility tree will be kind of messed up.

As a result the carousel looks like this. Click a thumbnail, and you will see the carousel 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.

This tutorial uses the following fade carousel. You have to assign a different ID, such as main-carousel, 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 carousel to thumbnails, use the Splide#sync() method. You must call it before mount().

var main       = new Splide( '#main-carousel', { ... } );
var thumbnails = new Splide( '#thumbnail-carousel', { ... } );


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-carousel', {
    type      : 'fade',
    rewind    : true,
    pagination: false,
    arrows    : false,
  } );


  var thumbnails = new Splide( '#thumbnail-carousel', {
    fixedWidth  : 100,
    fixedHeight : 60,
    gap         : 10,
    rewind      : true,
    pagination  : false,
    isNavigation: true,
    breakpoints : {
      600: {
        fixedWidth : 60,
        fixedHeight: 44,
      },
    },
  } );


  main.sync( thumbnails );
  main.mount();
  thumbnails.mount();
} );
JavaScript