Carousel Controls

A prev/next arrow button for a carousel.

Last updated

August 14, 2026

How to use

Add the Carousel and give it a unique Carousel ID.
Place an instance for the left arrow: set its Carousel ID to the same value and Direction to ←.
Connect your arrow design to ⦿ Enabled, and optionally connect a ⦿ Disabled control for the greyed-out look at the end of the scroll.
Duplicate it for the right arrow: set Direction to →, and reconnect the right-pointing ⦿ Enabled / ⦿ Disabled designs.
Optionally set Single Page to Hide so the arrows disappear entirely when there's nothing to paginate.

If no ⦿ Enabled or ⦿ Disabled design is connected, the control shows a placeholder prompting you to add them.

Each instance controls one direction, and shows exactly one of three states:

State	When it shows	What happens
`⦿ Enabled`	The carousel can still scroll in this direction.	Clicking advances the carousel one step.
`⦿ Disabled`	The carousel is at its start (for ←) or end (for →).	Shows the connected `⦿ Disabled` design; if none is connected, the arrow hides instead. The click does nothing.
Hidden (single page)	`Single Page` is set to `Hide` and there's nothing to paginate.	The arrow is removed entirely.

On the Framer canvas, the left arrow always previews as disabled and the right arrow as enabled, so you can style both states side by side.