Easy CSS slider (carousel with pure CSS)

You might be thinking “CSS is used for styling while JavaScript is used for interactivity, that’s just the way the web works.”

But CSS loads on a webpage faster than JavaScript. And CSS also causes less reflow on a page (which improves performance). So, it’s fair to say we should use CSS for interactivity wherever possible.

Our easy CSS slider

Let’s take a look at the slider (CSS carousel) we’ll be building today. Scroll through to see the scroll-snap effect:

While we'll be using mostly CSS language for the carousel, we first need to set the layout applying HTML.

1. Layout with HTML

The layout of our easy slider is simple. We’ll create a carousel-containerdiv to hold the carousel-slide elements.

1	<divclass="carousel-container">
2	<divclass="carousel-slide">1</div>
3	...
4	</div>

That’s all we need so let’s move on to the styling of our carousel in HTML and CSS.

2. CSS Carousel behaviour

Once we have our carousel slides set up, we’ll style the CSS slider to have the following features:

Scrollable content
Snap to next slide
Progress bar indicating slide progress

Scrollable content

For the scrollable content, we’ll use the display:flex and overflow-x: auto properties. We’ll also style slides so we can see 3 slides on the desktop screen and 1 slide on mobile.

.carousel-container{
display:flex;
overflow-x:auto;
}

.carousel-slide{
flex:1030%;
}

@media(max-width:600px){
.carousel-slide{
flex:1090%;
}
}

Snap to slide

Next, to achieve the snapping effect on the slides, we’ll use the CSS scroll-snap properties.

The scroll snap properties allow us define “snapping” points on an element. These are the points of the element that we want to be fully visible once scrolling.

The updated code of our carousel in CSS looks like this:

.carousel-container{
display:flex;
overflow-x:auto;
scroll-snap-type:xmandatory;
}

.carousel-slide{
flex:1030%;
scroll-snap-align:center;
}

@media(max-width:600px){
.carousel-slide{
flex:1090%;
}
}

We can get a better understanding of how the scroll-snap property works using this demo:

Let’s break down what’s happening:

1. The first property is the scroll-snap-type. This property is applied to the parent container and accepts two keywords:

The first keyword determines which axis the scroll snap should be applied to - x, y, both or none.
The second keyword determines the behaviour of the scroll snap. If set to proximity, the scroll will only snap to the nearest element if it’s close enough to the edges of the container. Mandatory means the container will always snap to whichever element is closest.

2. The second property is the scroll-snap-align. This applies to the children of the scroll snap type container. It determines which part of the element is snapped into view.

Optional: CSS-only progress bar

Let's keep inline with our CSS-only interactivity. We can take advantage of native browser features to create a progress bar for our carousel in CSS.

We’ll do this by styling the carousel container scrollbar to give the appearance of a progress bar. This is what the code looks like:

.carousel-container::-webkit-scrollbar{
height:8px;
}

.carousel-container::-webkit-scrollbar-thumb{
background:#29AB87;
}

.carousel-container::-webkit-scrollbar-track{
background:#b1b3b399;
}

.carousel-container::-webkit-scrollbar-track-piece:start{
background:#29AB87;
}

Learn more about the display, flex, overflow, and background CSS properties on out dedicated tutorials.

Let’s look at the properties we’re using:

::webkit-scrollbar: the entire scrollbar element
::webkit-scrollbar-thumb: the draggable bar on the scrollbar
::webkit-scrollbar-track: the path that the scrollbar thumb is on
::webkit-scrollbar-track-piece:start: the path of the track not covered by the scrollbar thumb, the :startCSS selector targets only the path behind the scrollbar thumb

In the diagram above, we can see what parts of the scrollbar are being targeted. By making the -webkit-scrollbar-thumb and ::webkit-scrollbar-track-piece:start the same color in CSS, the scrollbar gives the impression of being filled in as it’s being scrolled. This creates a progress bar.

Since our progress bar is actually a scrollbar, it can also be used to scroll through the CSS carousel. It results in an additional feature: it’s a win/win!

The ::webkit-scrollbar properties are non-standard, pretty sketchy, and not supported by all browsers. That's why it’s not recommended to use this in a production environment. Our progress bar will look like a regular scrollbar on non-supported browsers. This also happens if you choose not to include these ::webkit-scrollbar rules.

That’s all there is to our easy slider! We've built a scrollable container with a nifty snapping feature. We even added a progress bar using only CSS:

3. More features with JavaScript

We’ve gotten the basic feature of the CSS carousel out of the way. Now we can go on to add even more features, using JavaScript this time.

One of those features is using arrows to handle the carousel navigation. In a previous tutorial, we looked into building a carousel with JavaScript (less than 14 lines of code!). We can combine that tutorial with this one to add even more features to our easy slider.

Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.
How To Build a Simple Carousel With Vanilla JavaScript (14 Lines of Code!)
Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.Image may be NSFW.
Clik here to view.
Jemima Abu
16 Aug 2023

This is what our combined CSS carousel looks like:

In this demo of a carousel in CSS and HTML, just for fun, the code has been refactored to use even fewer lines of JavaScript. This is what our updated carousel arrow function looks like:

constcarousel=document.querySelector(".carousel-container");
constslide=document.querySelector(".carousel-slide");

functionhandleCarouselMove(positive=true){
constslideWidth=slide.clientWidth;
carousel.scrollLeft=positive?carousel.scrollLeft+slideWidth:carousel.scrollLeft-slideWidth;
}

Then we pass that function to our HTML arrows:

<buttonclass="carousel-arrow carousel-arrow--prev"onclick="handleCarouselMove(false)">
&#8249;
</button>

<buttonclass="carousel-arrow carousel-arrow--next"onclick="handleCarouselMove()">
&#8250;
</button>

And with that, we’ll call it a day on our modded-up carousel in CSS and HTML!

What's next?

You just learned how to create an easy carousel in HTML and CSS. There's a ton of useful tips and tricks yet for you to learn. Check out some of our tutorials and get closer to become a CSS master!