Blog.  Engineering at Spinneret.

Creating a Scrollable Carousel With Only CSS

By Michael Stepanian

A common design for modern web applications is the scrolling carousel, seen here in action on a Google search:

This can be easily achieved with a few divs and some tricks with overflow. First, we create two divs with one scrolling inside the other:

HTML
<div class="carousel-container">
    <div class="carousel-inner">
        <div class="carousel-item">...</div>
        <div class="carousel-item">...</div>
        <div class="carousel-item">...</div>
        .
        .
        .
        <div style="clear: both;"></div>
    </div>
</div>
CSS
.carousel-container {
    width: 1000px;
    overflow-x: scroll;
}

.carousel-inner {
    /* this must be ((carousel-item width) + (carousel-item margin)) * (num of carousel-items) */
    width: 1680px;
}

.carousel-item {
    height: 200px;
    width: 200px;
    margin-right: 10px;
    float: left;
}
			

The carousel-container is the window in which we see a portion of the much wider carousel-inner div, which contains all of the carousel items. This can also be done with the carousel-items being inline-block; however, I prefer them floated left. If you are making them inline-block, the width on the carousel-inner is not necessary.

You will notice that there is a scroll bar under the carousel. This is ugly and we can remove it by giving the carousel-container a height and hiding the overflow:

.carousel-container {
    width: 1000px;
    height: 200px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.carousel-inner {
    width: 1680px;
    height: 220px;
}

.carousel-item {
    height: 200px;
    width: 200px;
    margin-right: 10px;
    float: left;
}
		

And that's it! If you want to add some interactivity, you can add buttons with javascript events that will modify the scrollLeft attribute of carousel-inner.