Create a Carousel

Ask the community
1

Hello everyone,

I’m currently trying to figure out the carousel thing on Figma for a school projet (trying to build an app).

I want to create a carousel where there’s an arrow which can be clicked on to check the next photos (I don’t want it to be a scrolling).

I’m trying with components and interactions but can’t find out how to do that…

Is there someone who tried it before and could enlighten me ?

Thank you in advance Figma Community :blush:

2

There’s plenty of carousels to study shared with the community.
There’s a simple and education friendly one by @ssemenov here: Figma - Carousel | The carousel is a slideshow for cycling through a series of content which was made as an interact...

My personal observations on that file:

  1. On the carousel component you will find a gallery padding for each variant. Autolayout is unnecessary on them.
  2. Heavy use of autolayout comes down to personal preference, which I myself endorse, but having said that if you remove autolayout on the parent element of gallery padding then the gallery padding frame can be removed (the frame, not the contents).
3

@Emilie2 as @Klesus Mentioned — there are a lot of examples.
It can be though to keep auto layout if you need some more complex interactions and effects.

Here is a prototype I made today.

Feel free to use the file.
It’s hard to recreate all effects and keep Auto Layout.

But it does have:

  • Responsive Layout ↔️
  • Touch friendly navigation :tada:
  • Navigation by image dragging or tapping + dots + arrows :white_check_mark:
  • It’s spinning in infinite loop :repeat:

Haven’t tested everything so there might be some glitches — but it should work in principle.

Hope it helps.

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

5

i wanted to learn how does the carousel of prime video can be designed searched multiple times but no luck. Can someone help me with it .
Thanks.

7

Hey @Pranabesh_Kumar, thanks for reaching out!

We’ve merged your topic with a similar existing one in the community.

The replies above may help with this, but there are other videos from YouTube that may help as well: