In web design, a carousel is a slideshow for presenting a series of content. Sounds harmless, right?

But some web designers love carousel sliders, and others despise them.

That’s because when done right, a carousel slider can effectively organize serial content or multiple, separate pieces of content. It can also boost engagement and provide a better user experience by enabling visitors to quickly and easily navigate this content, especially on mobile.

However, when done wrong, carousel sliders cause more harm than good. An automated slider, for example, can be more distracting than informative. A slider with cheesy animations can make your site seem less professional. And a poorly designed carousel can be completely overlooked, which effectively hides the information on other slides from your visitors.

Free Intro Guide to HTML & CSS [Download Now]

To avoid these potential pitfalls and only reap the benefits of a carousel slider, make sure you understand the do’s and don’ts of this design element. A big “do” is to create a carousel slider with accessibility in mind. Below we’ll cover two ways you can do so on your site. Let’s get started.

CSS carousel

There are two ways to create a carousel slider for your website. You can build it from scratch using HTML and CSS only. Or you can use Bootstrap CSS, which is a framework that offers pre-designed components including carousels, to speed up the code development process.

Below we’re going to take an in-depth look at each process and walk through an example carousel build for each.

How to Make a Simple Carousel in Bootstrap CSS

With Bootstrap, you can make a simple carousel using only HTML. To show you how, we’re going to break down the process of making a carousel with slides and controls. This is going to be virtually identical to the second example in Bootstrap’s official documentation, save for the ID name.

Let’s start with the parent element. You need a <div> element to start. Make sure to give it a unique ID name so you can apply optional controls later. This is particularly important if you’re adding multiple carousels on a single page. I’m going to name this example "SimpleCarouselExample."

Then you want to define the element with the .carousel slide class and add the data-ride="carousel" attribute so that the carousel starts animating at page load, without you needing to do anything. Here’s what our HTML looks like so far:

 

 

   <div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel">

</div>

 

Now we need to place child elements inside this parent <div> element. Let’s say we want three images in the carousel. Here’s the HTML for those images, with ellipses acting as placeholders for the specific image source and alt-text we’d use.

 

 

   <img src="..." class="d-block w-100" alt="...">

<img src="..." class="d-block w-100" alt="...">

<img src="..." class="d-block w-100" alt="...">



Notice the presence of the .d-block and .w-100. These classes prevent browser default image alignment. More specifically, .d-block is a display property value in Bootstrap that makes an element visible on all screen sizes and .w-100 is a width utility value that makes the element 100% as wide as its container.

We need to wrap each of these images in a <div> element with the .carousel-item class so the browser knows they belong in the carousel. Here’s what that looks like for the first image:

 

 

   <div class="carousel-item active">

<img src="..." class="d-block w-100" alt="...">

</div>



Note: The .active class needs to be added to one of the slides. Without this class, the carousel will not be visible.

I’m going to wrap all of these carousel items in a <div> element with the .carousel-inner class, as shown below:

 

 

   <div class="carousel-inner">

<div class="carousel-item active">

<img src="..." class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="..." class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="..." class="d-block w-100" alt="...">

</div>

</div>



Now that I have successfully created a carousel with slides only, it’s time to add in the previous and next controls. To create these, add two <span> elements and define them with .carousel-control-prev-icon class and the .carousel-control-next-icon class, respectively.

 

 

   <span class="carousel-control-prev-icon" aria-hidden="true"></span>

 

<span class="carousel-control-next-icon" aria-hidden="true"></span>



Notice the ARIA attributes. We’ll explain them in a minute but, first, we have to go over what to add to make the design accessible.

Some users, particularly those using screen readers, will not see or be able to click the previous and next icons. That’s why you need to add two more span elements that spell out each icon as “Previous” and “Next.” Define these with the .sr-only class so that the text is hidden on all devices except screen readers. You should now have two pairs of spans that look like this:

 

 

   <span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

 

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>



 

The aria-hidden attribute tells assistive technologies to skip the carousel’s DOM so that when they go over this code, they read simply read "Previous" or “Next.”

Now that we’ve created the icons (and alternative text), we need to wrap the pairs in <a> elements. Define each element with the .carousel-control prev and the .carousel-control-next class, respectively.

You’ll also need to a[href]s with the exact same ID name as the carousel element. In Bootstrap, control and indicator elements must have a data-target attribute (or href for links) that matches the id of the .carousel element. You’ll assign them each the role of button and the data-slide attribute set to “prev” and “next,” respectively. Here’s what the HTML will look like:

 

 

   <a class="carousel-control-prev" href="#SimpleCarouselExample" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#SimpleCarouselExample" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>



Put all together, here’s the HTML you’ll need to create a simple carousel with slides and controls:

 

 

   <div id="SimpleCarouselExample" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="carousel-item active">

<img src="..." class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="..." class="d-block w-100" alt="...">

</div>

<div class="carousel-item">

<img src="..." class="d-block w-100" alt="...">

</div>

</div>

<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">

<span class="carousel-control-prev-icon" aria-hidden="true"></span>

<span class="sr-only">Previous</span>

</a>

<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">

<span class="carousel-control-next-icon" aria-hidden="true"></span>

<span class="sr-only">Next</span>

</a>

</div>



This is how the carousel will look and behave on the front-end of your site. Notice that it automatically goes to the next slide if I do nothing, but will let me flip back and forth when using the control options.

Bootstrap CSS carousel slider with slides and controls example

You can find other examples of carousels in Bootstrap’s official documentation.

A Pure CSS Carousel Slider

Before we dive into an example build, it’s important to understand that creating a pure CSS carousel slider requires HTML as well. After all, CSS is a styling language so you need HTML to have something to style.

What a “pure CSS” or “CSS-only” carousel means is that you won’t need JavaScript. This is good news for most site owners since JavaScript is a complex programming language that can be difficult to learn and use correctly.

Now that we have a better idea of the terminology and value of thinking CSS-first, let’s walk through an example of building a CSS-only carousel.

Let’s say you want to create a carousel with three slides. Then you’d create three <div> elements and wrap them in a parent <div> element with the class .slides, as shown below:

 

 

   <div class="slides">

<div> 1 </div>

<div> 2 </div>

<div> 3 </div>

</div>



Time for CSS. To style the container, use the CSS selector .slides. To start, set the display property to “flex” to make it a flexbox. Make sure you do the same to the slides so they become flex items as well. Here’s the CSS:

 

 

   .slides {

display: flex;

}

.slides > div {

display: flex;

}

You can learn more about how to use Flexbox to create one-dimensional layouts in Here's the Difference Between Flexbox, CSS Grid, & Bootstrap.

Now we want to make sure users can scroll through these slides manually. To do so, we’re going to set the overflow-x property of the container to auto. This provides a scrolling mechanism for overflowing boxes or, in this case, a slideshow. Here’s the CSS:

 

 

   .slides {

overflow-x: auto;

}

 

Then to each slide in the carousel, we’re going to set the width to 100% so it spans the whole viewport horizontally and set the height to 300px. We’re also going to set the flex-shrink property to 0 so that the slides don’t shrink or wrap on smaller devices. Here’s the CSS:

 

 

   .slides > div {

flex-shrink: 0;

width: 100%;

height: 300px;

}

 

 

We can do a few more things to improve the scrolling experience. To have each slide “snap into” place when scrolling from one to the other, we can add snap-points with the scroll-snap-type property and the scroll snap align property. We can also make sure that the sliding action is smooth on both desktop and mobile with the scroll-behavior property. Here’s what the CSS looks like:

 

 

   .slides {

scroll-snap-type: x mandatory;

}

.slides > div {

scroll-snap-align: start;

scroll-behavior: smooth;

}



I’m just going to style my three slides so that we can see them better, changing the background color to blue, aligning both the slides and the text in the center of the container, and increasing the font-size. Here’s the CSS:

 

 

   .slides > div {

background: #74ABE2;

justify-content: center;

align-items: center;

font-size: 100px;

}



All together, here’s the CSS:

 

 

   .slides {

display: flex;

overflow-x: auto;

scroll-snap-type: x mandatory;

}

.slides > div {

display: flex;

flex-shrink: 0;

width: 100%;

height: 300px;

scroll-snap-align: start;

scroll-behavior: smooth;

background: #74ABE2;

justify-content: center;

align-items: center;

font-size: 100px;

}



Here’s the result:

Pure CSS carousel slider example with slides only and scrolling mechanism

Source

Adding a Carousel Slider to Your Site

Carousel sliders can help you effectively use space and organize content on your site, while keeping visitors engaged and giving them control over how they read your content. If they’re the right choice for your site, then you can use either of the methods above to create a carousel slider without Javascript. You just need to understand some HTML and CSS.

New Call-to-action

 css introduction

Originally published Jun 8, 2020 7:00:00 AM, updated June 08 2020

Topics:

Bootstrap CSS