Carousel

Learn more about design carousels

What is a carousel?

In web and mobile design, a carousel is an effective way of displaying a series of images or content cards in an infinite loop. The user can browse visual content image-by-image; either by using the arrow keys on desktop or by swiping from left to right on a mobile device. This type of interaction is sometimes also referred to by the name of “rotating offer.”

You will most likely have have seen carousel ads used on social media platforms such as Instagram and Facebook, where a series of images can be viewed as a single post. This illustrates one of the main advantages of this type of pattern; namely the ability to pack a lot of visual information into a limited amount of space.

Carousels vs sliders; what’s the difference?

Often people become confused between slider and carousel patterns. And the fact that some people refer to carousels as “carousel sliders” only muddies the waters even further. As there’s a lot of overlap between the two designs, this confusion is entirely understandable. Despite the similarities, however, there is in fact a clear difference between a carousel and a slider. Let’s take a look at them in turn.

Slider

Technically it could be argued that a slider is merely a lever or knob that can be moved either vertically or horizontally to browse information – usually images. In common usage, however, the word slider is often used to refer to a horizontal viewing gallery that makes use of a slider lever for navigation.

A slider of this type permits the user to move horizontally between pages (or content within a page, such as with an image gallery), from left to right, or right to left. This makes a slider ideal for presenting information in series with clear start and end points and a fixed order. Once the user reaches the end of the series, though, they have no other option but to go back again in the opposite direction.

Carousel

A carousel shares the fixed, linear format of a slider pattern, with the user typically swiping between images from left to right, or vice versa. However, the defining characteristic of a carousel is that, like the “merry-go-round” it gets its name from, a carousel eventually comes full circle so that the user returns to their original starting point again. The user doesn’t have to stop there, though, as a carousel permits infinite rotation of content/pages on a loop. It’s largely this element that sets these interactions apart from other patterns.

Some carousel designs reflect the circular form of the merry-go-round that inspired them even more than this though. This is achieved by simulating the perspective foreshortening that occurs when images turn on an axis; with the front image facing the viewer, and the preceding and following images giving the impression of rotating off into the distance. In this respect design carousels are actually most similar in appearance to the cartridges – also known as carousels – that were once used to load transparencies into slide projectors.