Media Controls

A prev/next arrow button for the product media gallery.

Last updated

August 14, 2026

How to use

Place the control inside or alongside the product media gallery, somewhere ⛁ Butter Data is available, and connect it.
Set Direction to ← (previous) or → (next).
Connect a ⦿ Default design for the normal, clickable arrow.
Optionally connect a ⦿ Disabled design for the gallery boundary — if you skip it, the arrow hides instead.
Add a second instance with the opposite Direction so you have both a previous and a next arrow.
Optionally set Single Page to Hide so the arrow disappears entirely when the gallery only has one item.

Default, Disabled, and hidden — what each arrow state does

State	When it shows	What happens
`⦿ Default`	There's a media item in this control's direction.	Renders your Default design; clicking advances the gallery by one item.
`⦿ Disabled`	The gallery is already at the first item (previous) or last item (next).	Shows your connected Disabled design if you added one; otherwise the arrow hides. Clicks do nothing either way.
Hidden	`Single Page` is set to `Hide` and the gallery has only one media item.	The arrow is removed entirely.

On the Framer canvas, the left arrow always previews as disabled and the right as enabled, so you can see and style both states at once without connecting live data.

It's one arrow, driving a shared gallery

Each instance is a single arrow, not a pair — you need two, one Direction each, for full previous/next navigation. Clicking it moves the whole gallery in lockstep — the Media Slideshow, Active Variant Media, Media Counter, Media Dots, and Media Scrollbar for that product all follow along automatically. It also needs ⛁ Butter Data connected to resolve which gallery to drive — without it, the control can't tell what to advance.