Framerfy Docs – Shopify Storefronts in Framer

A single-image slider gallery component for Framer with thumbnail navigation, arrow controls, zoom on hover, and variant-based image switching.

What It Does

The Slider Media Carousel displays one image at a time and lets users navigate between them using arrow buttons or by clicking thumbnails. Unlike the Vertical Media Carousel, only one image is shown at a time — the rest are accessible through navigation. Key behaviors at a glance:

Single image view — only one image is displayed at a time, with a smooth fade transition when switching.
Arrow navigation — previous/next arrow buttons let users step through images. Arrows can be repositioned and grouped into a compact layout.
Thumbnail strip — a row or column of thumbnail images appears alongside the main image. Clicking a thumbnail jumps directly to that image. The strip auto-scrolls to keep the active thumbnail in view.
Configurable thumbnail position — thumbnails can be placed above, below, to the left, or to the right of the main image.
Zoom on hover — hovering over the main image zooms into the area under the cursor (can be toggled off).
Variant-aware — reads a ?variant= URL query parameter and automatically switches to the image that matches the selected product variant.

Property Controls

All controls are accessible in Framer’s right panel when the component is selected. They are grouped into four sections: Image, Variants, Gallery, Thumbnail, and Arrows.

Image

Property	Type	Default	Description
Image	String (JSON)	3 sample Nike shoe URLs	A JSON array of image URLs to display in the slider. In Framer CMS, connect this to the `"Image URLs"` variable from your CMS collection.

Variants

Property	Type	Description
Variants	String (JSON)	A JSON array of product variant objects, each containing an `id` and an `image.url`. Connect this to the `Variants` variable from your Framer CMS. When a visitor lands on the page with a `?variant=<id>` URL parameter, the slider automatically switches to the image matching that variant.

Gallery

Controls the appearance of the main image display.

Property	Type	Default	Description
Aspect Ratio	String	`1/1`	The width-to-height ratio of the main image. Use CSS ratio syntax: `1/1` (square), `4/5` (portrait), `16/9` (landscape), etc.
Enable Zoom	Boolean	`true`	When enabled, hovering over the main image zooms into the area under the mouse cursor (2× zoom). Disable for a static experience.

Thumbnail

Controls the thumbnail strip alongside the main image.

Property	Type	Default	Description
Position	Enum	`Bottom`	Where the thumbnail strip appears relative to the main image. Options: `Bottom`, `Left`, `Top`, `Right`. Horizontal positions (`Top`, `Bottom`) lay thumbnails in a row; vertical positions (`Left`, `Right`) stack them in a column.

Arrows

Controls the previous/next navigation arrows overlaid on the main image.

Property	Type	Default	Description
Show	Boolean	`true`	Master toggle. Turn this off to hide both arrows entirely. Only appears when there is more than one image.
Position	Enum	`Top Left`	Where the arrows are placed on the main image. Options: `Center`, `Top Left`, `Top Right`, `Bottom Left`, `Bottom Right`.
Compact	Boolean	`false`	When enabled, both arrows are grouped together on the same side of the image rather than sitting on opposite sides. Useful for a cleaner, minimal layout.

Notes

Image URLs must be passed as a JSON array string (e.g. ["https://...", "https://..."]). Framer CMS handles this automatically when you connect the right variable.
The zoom effect zooms 2× centered on the mouse position and is purely CSS transform-based.
The thumbnail strip hides its scrollbar visually but remains scrollable when there are more thumbnails than fit in the available space.
Arrows are hidden automatically when there is only one image.

​What It Does

​Property Controls

​Image

​Variants

​Gallery

​Thumbnail

​Arrows

​Notes