Creating a Slide Show with CSS Scroll Snapping

Leveraging a new CSS feature to make a slideshow presentation

Malcolm Laing
Oct 3 · 4 min read
Slide show made with CSS Scroll Snapping

Scroll snapping has been a popular website feature for years now. It’s often used to create carousels and image galleries. When implemented poorly, it provides a frustrating user experience. The term scroll hijacking is often used to describe websites that manipulate the default scrollbar experience. However, when done right and not overused, it can provide a pleasant user experience.

In the past, developers would have to resort to complex JavaScript code to implement these sorts of behaviours. Now, thanks to the new CSS Scroll Snap feature, we can implement this feature with only CSS. This provides a more performant and smooth experience for the user.

Can I use it?

Let’s face it — when discussing new CSS language features, this question always comes up. Scroll Snap is fully implemented in Chrome, Firefox and Safari. An older version of the spec is implemented in (non-chromium) Edge and IE 11. It’ s also supported by IOS and mobile Chrome on Android. So the support is there, it’s up to us as developers to start using it.

Why should we make a web-based slideshow?

As web developers, we are very good at making great looking websites. We have no problems positioning our content using flexbox and CSS Grid. So why bother fighting with Powerpoint or Keynote when we can do it ourselves using HTML and CSS?

Getting started

Let’s start by making the HTML markup we will need for our slide show deck.

It’s pretty simple.

<html>
<body>
<div class="slide-container">
<div class="slide"><h1>First slide</h1></div>
<div class="slide"><h1>Second slide</h1></div>
<div class="slide"><h1>Third slide</h1></div>
</div>
</body>
</html>

Then we add our CSS.

body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.slide-container {
scroll-snap-type: x mandatory;
overflow-x: scroll;
display: flex;
}
.slide {
scroll-snap-align: start;
min-width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

What is interesting here are the properties scroll-snap-type and scroll-snap-align. Since we are creating a slide show, we want our scrolling to be horizontal. That’s why we use x as the value for scroll-snap-type. Other options include y, inline and block. We could also adjust the strictness of the snapping by changing the strictness to none or proximity. The other change we make to our slide-container is we set overflow-x to scroll.

For the slides themselves, we want them to take up 100% of the viewport width and height, so we set min-width to 100vw and height to 100vh. We also set the property scroll-snap-align to start. This makes our snapping occur at the start of the element. We need to set this, as the default value is none, which means no snapping would occur.

Trying it out

CSS Slideshow in action
CSS Slideshow in action
Our slideshow in action.

Considering we only used a few lines of HTML and CSS, it looks pretty great. And we didn’t even use JavaScript.

Let’s just clean it up a bit, and make it look a bit nicer. I started by modifying the HTML for a slide to look like this.

<div class="slide">
<div class="image-ctn">
<img src="image-path" />
</div>
<div class="text-ctn">
<h1>Giant Panda</h1>
<p>
The giant panda, also known as panda bear or simply panda, is a bear native to south central China. It is easily recognized by the large, distinctive black patches around its eyes, over the ears, and across its round body.
</p>
</div>
</div>

Next, I made added the following changes to the CSS.

img {
max-width: 100%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.2rem;
}
.text-ctn {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 1em;
}
.image-ctn {
width: 50%;
}

Then I just added a few more slides with different animal pictures and information.

And voila, the final product.

Our final slideshow

Check out the codepen below to see the full implementation.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Malcolm Laing

Written by

Front End Engineer in Berlin. Loves React, building component libraries, module bundling, and testing.

Frontend Digest

Anything and everything frontend. JavaScript, CSS and HTML.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade