Your CMS collection,
in focus.
Documentation · Version 1.0
How to connect any CMS collection, tune the focus effect, drag, autoplay and the full-screen viewer, every setting in the panel, and six looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Focus Carousel on a page. It arrives with ten demo shoots so you can see it work.
Feed it your collection. Set Source to CMS, add a Collection List of your collection on the same page and put a Focus Slide inside its item. The next sections show the steps.
Tune the focus. Slide width, how many show at each side, and how the side slides step back: scale, opacity, blur, grey, dim.
Choose what a click does. Open each item’s page, or open the full-screen viewer. Then preview and drag it.
02
How it works.
The carousel shows a whole collection: projects, shoots, products, rooms. The slide in the middle is large and sharp; the ones beside it are smaller and quieter. Each Focus Slide hands one Collection List item to the carousel: its image or video, title, subtitle, category and link.
Visitors drag or swipe with momentum, use a trackpad, the arrow keys or the arrows, and click a side slide to bring it to the middle.
The Collection List decides which items reach the carousel and in what order: its own filters, sort and limit apply first. A new item in the CMS shows up on its own.
No WebGL, no API keys, no backend, no tracking. The component makes no network requests of its own. Only your images load.
Images load from Framer’s own srcSet, so phones get small files and large screens get sharp ones.
Live component with demo shoots. With Source on CMS it reads the Focus Slides in your Collection List.
03
Connect your collection, step by step.
Use any collection with an image. A category (an Option field or plain text), a subtitle, a video and a page per item are all optional.
Add a Collection List anywhere on the same page, connected to it.
Put a Focus Slide inside its item and connect its fields: Image to your image field, Title, Subtitle, Category, Video and Link to the item’s own page. For an Option field, pick Display option when you connect Category, so it shows the option’s name.
Select the carousel and set Source to CMS.
Use the same Kit name on the carousel and on the Focus Slide. “carousel” is the default on both. With two carousels on one page, give each its own name and its Focus Slide the matching one. Two carousels can also share one Collection List by using the same name.
Preview. Every item shows up once, in the list’s order.
On the published site, Focus Slides show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Focus Slide shows a small dashed label like “Focus Slide · Red Hour · Fashion”, so you can check it reads the right fields.
Good to know:
Leave the Collection List’s limit high enough to include every item you want in the carousel.
With Source on Manual, add slides in the panel instead. Use it for a page without a CMS.
04
The focus effect.
The middle slide as a share of the carousel’s width. Phone width is used when the carousel is narrower than 640 px. Max width caps it on very wide screens.
4:5, 3:4, 1:1, 4:3, 3:2, 16:9 or 21:9. Radius rounds the corners; a large radius with 1:1 makes round slides.
The space between the edges of the slides. 0 lets them touch.
1, 2 or 3 slides on each side of the middle one. With few slides, fewer show, so none ever jumps across in view.
How the side slides step back. They change smoothly while a slide moves, so the one coming to the middle sharpens as it arrives.
Moves the side slides down, or up below 0, for a stepped look.
The slide in the middle when the page opens.
Different settings per breakpoint. Each breakpoint keeps its own settings, like a wider slide on Phone.
05
Moving it.
Drag with the mouse or swipe on touch. A slow drag moves one slide; a fast throw carries on for several. A vertical swipe still scrolls the page.
A sideways swipe on a trackpad or a horizontal wheel moves the slides with the fingers, then they settle. Vertical wheel makes the mouse wheel move them too; it stops the page from scrolling over the carousel, so use it only where that is what you want.
With the carousel focused, the left and right arrows move one slide, Home and End go to the first and last.
At the Sides of the middle slide, Below next to the counter, or None.
After the last slide comes the first. Off, the arrows stop at each end and a drag past them pulls back.
One step every Interval seconds. It pauses on hover, while anything in it has focus, off screen, in a background tab, while the viewer is open, and with its own Pause button.
How long a slide takes to settle.
Videos. A Focus Slide with a Video (MP4, WebM or MOV) plays it muted and on loop in the middle slide only, with the image as its cover. The side slides show the cover.
06
Text under the slides.
Below: the title, then the subtitle and category, under the middle slide.
Split: the title on the left, the subtitle and category on the right.
Overlay: the same over the bottom of the middle slide, on a soft dark gradient.
Hidden: no text. The viewer still shows it.
Counter adds 03 / 18. Progress adds a thin line that fills as visitors move through.
The text changes with a short fade as each slide reaches the middle.
07
Click and the viewer.
A click on a side slide brings it to the middle.
Click: Open link goes to the middle slide’s Link. With the viewer on, a small button on the middle slide opens it full screen. Slides without a Link open the viewer.
Click: Viewer opens the viewer from the middle slide.
The viewer shows every slide full screen, with a counter like 02 / 18.
Zoom: pinch, double-tap or double-click a photo to zoom in, then drag to look around. A trackpad pinch works too, and the zoom button does the same from the keyboard.
Thumbnails: a strip of small photos at the bottom. It hides on very short screens, like a phone held sideways.
The title and details sit under the photo, with a View project link when the slide has a Link.
Escape zooms out, then closes. The arrow keys move between photos. On touch screens, swipe sideways to browse and down to close.
When it closes, the carousel is on the slide the viewer was showing, and focus goes back to the carousel.
08
Customize the look.
Text
Title font, Title colour (also the progress line), Detail font, Detail colour, Overlay text, Counter font and Line (the track of the progress line). Turn Subtitle and Category on or off. Pick your site’s colour styles so the carousel follows your palette, in light and dark.
Arrows and focus
Arrow fill and Arrow icon style the arrows and the full-screen button. Focus ring is the keyboard focus colour.
Viewer
Viewer fill, Viewer text, Zoom and Thumbnails.
Recipes
Slide width 34 · At each side 2 · Side scale 0.78 · Side opacity 0.5 · Gap 28 · Text Below
Side scale 0.84 · Side opacity 0.9 · Side blur 6 · Side grey 1 · Gap 20
Slide width 22 · Aspect 3:4 · At each side 3 · Side scale 0.88 · Side opacity 1 · Side dim 0.45 · Gap 12 · Text Split · Arrows Below
Slide width 52 · Aspect 16:9 · At each side 1 · Side dim 0.6 · Text Overlay · Autoplay on
Slide width 56 · Aspect 3:4 · At each side 1 · Side scale 0.7 · Side opacity 0.35 · Side offset 36 · Radius 0
Aspect 1:1 · Radius 999 · Side grey 1 · Text Hidden · Arrows None · Click Viewer
09
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
CMS (Focus Slides with the same Kit name) or Manual.
CMS: the name shared with the Focus Slides.
Manual: Image, Video, Title, Subtitle, Category, Link and Alt text. Up to 40.
Slides
Slide width, Phone width, Max width, Aspect ratio, Radius, Gap, Image fill.
Start at — the slide in the middle on load.
Focus effect
At each side — 1, 2 or 3.
Side scale, Side opacity, Side blur, Side grey, Side dim, Side offset.
Text
Text — Below, Split, Overlay or Hidden.
Subtitle, Category, Counter, Progress.
Title font, Title (colour), Detail font, Detail (colour), Overlay text, Counter font, Line.
Motion
Loop, Drag, Trackpad, Vertical wheel.
Autoplay, Interval — seconds between steps.
Glide — how long a slide takes to settle.
Play videos — videos play muted in the middle slide.
Arrows
Arrows — Sides, Below or None. Arrow fill, Arrow icon.
Click and viewer
Click — Open link or Viewer.
Viewer, Viewer fill, Viewer text, Zoom, Thumbnails.
Focus ring.
Labels
Carousel label — what screen readers call the carousel, like Projects.
Slide word and “of” word — screen readers hear “Slide 3 of 18”.
Previous label, Next label, Pause label, Play label, Full screen label, Close label, Viewer label, Zoom in label, Zoom out label, View label.
All of them are translated by Framer Localization.
Focus Slide
Kit name, Image, Video, Title, Subtitle, Category, Link, Alt text.
10
Performance
No WebGL, no network requests of its own, no scripts from other sites, no tracking.
The slides move by writing their position straight to the page on each frame, without re-rendering, so dragging stays smooth with many slides.
The middle slide and the ones in view load right away; the rest load lazily, at the size the slide needs.
Videos load only their first frame until they reach the middle and play only while the carousel is on screen.
On the canvas and in Framer’s static previews, it renders still, on the Start at slide.
11
Accessibility
The carousel is a labelled region with the “carousel” role description; each slide is a group called “Slide 3 of 18: Title”. Only the middle slide is announced and reachable with Tab.
Screen readers hear the new slide after every move (not while autoplay runs, so it never talks over the page).
Arrows, Pause and the full-screen button are real buttons with labels you can translate.
Alt text comes from the Alt text field, or from the image’s own alt text in Framer or the CMS, or from the title.
The viewer traps focus, closes with Escape and gives focus back to the carousel.
Visitors who prefer reduced motion get slides that change at once, no autoplay and no videos playing by themselves.
12
Troubleshooting
Source is Manual. Set it to CMS.
No Focus Slide uses the carousel’s Kit name, or the Focus Slides have no image or video connected.
The Collection List’s own filter or limit leaves them out. Raise the limit.
The Option field was connected without Display option. Connect Category again and pick it.
Vertical wheel is on. Turn it off.
Set its gap and padding to 0.
The Link isn’t a page of your site, a web address, an email or a phone number. Other kinds of link are ignored for safety.
13
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your order, which always points to the latest version, and copy your settings across.
1.0 · October 2026 — First release: the focus effect with scale, opacity, blur, grey, dim and offset, Focus Slides for any CMS collection, drag with momentum, trackpad, keys, loop, autoplay with pause, video in the middle slide, text below, split or over the photo, counter and progress, a full-screen viewer with zoom and thumbnails, and full documentation.
14
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one website or project, the same Single-Use licence as Framer’s Marketplace. For several sites, buy one licence per site. Reselling or redistributing the component isn’t allowed.
The demo shoots are samples. Replace them with your own before you publish.
Questions? Get in touch.
Email info@miguelrecio.es with your question and a link to your project.