Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Animated Tabs
Card List
Card Paging
Menu Transition
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Carousel

Open in Framer to interactPreview this example

Rotate between pages – forever – with a carousel design.

Open in FramerPreview Example

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.

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • Input Kitnew
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement