> ## Documentation Index > Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt > Use this file to discover all available pages before exploring further. # Slider Media Carousel ![Slider Gallery preview](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Slider%20Media%20Carousel.png) 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=` 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.