日本語

Image Carousel

Introduction

The goal of this tutorial is to create a typical image carousel with/without texts. This page also introduces how to normalize dimensions of images. Let's start! 💪

First, we need to create a basic structure by HTML and insert images into slides. Make sure to describe your carousel by aria-label (or aria-labelledby) and your images by alt. They are very helpful for people using screen readers.

<section id="image-carousel" class="splide" aria-label="Beautiful Images">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="image02.jpg" alt="">
			</li>
			<li class="splide__slide">
				<img src="image03.jpg" alt="">
			</li>
		</ul>
  </div>
</section>
HTML

Generally, images are smaller or larger than slides. Let's adapt the width to slides:

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

And then, initialize Splide after the DOM content gets ready. You have to listen to the DOMContentLoaded event if you activate it in <head>:

<script>
  document.addEventListener( 'DOMContentLoaded', function () {
    new Splide( '#image-carousel' ).mount();
  } );
</script>
HTML

...or you don't have to if doing that on the end of <body>:

<script>
  new Splide( '#image-carousel' ).mount();
</script>
HTML

Now we get the following carousel:

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03

Cropping Images

Source images usually have different aspect ratios. It's better to adjust their dimensions beforehand by sharp or image editors, but sometimes we need to crop them on the client side.

object-fit

Internet Explorer will be EOL, ...yes, finally. In all modern browsers, we can use object-fit that allows us to determine how images fit their parent element.

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

To make this CSS work, each slide must have explicit height. There are several ways to do that, let's utilize heightRatio option in this tutorial:

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
    heightRatio: 0.5,
  } ).mount();
} );
JavaScript

With this option, Splide calculates height of slides by multiplying the ratio to their width. For example, if the width is 1000px, the height will be computed to 500px (1000 * 0.5).

As a result, images cover up their owner slides:

  • Sample Slide 01
  • Sample Slide 02
  • Sample Slide 03

cover

If you still need to support IE, you can use the cover option that makes images into background images of their parent slides.

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#image-carousel', {
		cover      : true,
		heightRatio: 0.5,
  } ).mount();
} );
JavaScript

Do not forget to provide the height, heightRatio or fixedHeight option to ensure the slide has explicit height.

I'm planning to deprecate this option in the future as IE will be retired soon.

Images and Texts

Splide accepts any content inside slides. It's very easy to create a card style carousel:

<section id="image-carousel" class="splide" aria-label="Beautiful Images">
  <div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg" alt="">
				<div>
					Description 01
				</div>
			</li>


			<li class="splide__slide">
				<img src="image02.jpg" alt="">
				<div>
					Description 02
				</div>
			</li>
		</ul>
  </div>
</div>
HTML

Let's display 2 cards on PC, but reduce them to 1 on mobile devices.

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#card-carousel', {
		perPage    : 2,
		breakpoints: {
			640: {
				perPage: 1,
			},
		},
  } ).mount();
} );
JavaScript

Now we get the following card carousel:

  • Sample Slide 01
    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu
  • Sample Slide 02
    Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
  • Sample Slide 03
    Quo harum altera incorrupte ea, eos viris constituto ex
  • Sample Slide 04
    Commodo denique honestatis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius
  • Sample Slide 05
    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu
  • Sample Slide 06
    Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda

Note that if you want to use the cover option for the card carousel, you have to use a container element. See this document for more details.

As width and height options accept CSS relative units, it’s a piece of cake to create a full screen carousel. Simply apply '100vw' and '100vh'.

document.addEventListener( 'DOMContentLoaded', function () {
  new Splide( '#fullscreen-carousel', {
		width : '100vw',
		height: '100vh',
  } ).mount();
} );
JavaScript