Slider Parallax CMS— Framer Installation Guide
1. Copy and paste the SliderParallax link to the canvas
After copy and paste the link accepts and saves the code:
The default export in the supplied code is the main slider:
SliderParallax
The component defaults include:
Source: Manual
Direction: Vertical
Theme: Default
Navigation buttons: On
Pagination: On
Keyboard controls: On
Mouse wheel controls: On
Autoplay: Off
The underlying component defines these defaults directly.
For a full-screen hero slider, set the component approximately to:
Width: Fill / 100%
Height: 100vh
The code itself also defaults to width="100%" and height="100vh".
2. Test It in Manual Mode First
Before connecting CMS, confirm that the component works.
Select SliderParallax.
Under its properties, set:
Source → Manual
The component contains built-in sample slides, so it can display content even before you create your own slide data.
You should see a large image slider with content such as titles, description, metadata, CTA button, navigation and pagination.
If that works, the component itself is installed correctly.
3. Configure Basic Slider Settings
With SliderParallax selected, use the properties panel.
Source
Choose:
Manual
or:
Framer CMS
The code explicitly provides these two Source options.
Theme
Choose between:
Default Theme
Carousel Theme
Direction
Choose:
Vertical
or
Horizontal
The component exposes both options.
Navigation
Use:
Navigation → Show
You can also control whether navigation appears permanently or only while hovering.
Pagination
Enable:
Pagination → Show
The component supports regular labels as well as thumbnail-style pagination.
Interaction
You can enable or disable:
Keyboard controls
Mouse wheel controls
Hover slide behavior
Autoplay
4. Connecting the Slider to Framer CMS
This is the important part.
The component has a custom CMS bridge architecture.
It exports two additional components:
SliderParallaxCMSMain
and
SliderParallaxCMSDetails
The source specifically says that both bridge components should be placed inside the same repeated Collection Item.
Your structure should effectively be:
SliderParallax
│
└── CMS Content
│ └── Collection List
│ ├── Collection Item
│ ├── SliderParallaxCMSMain
│ └── SliderParallaxCMSDetails
│
├── Collection Item
│ ├── SliderParallaxCMSMain
│ └── SliderParallaxCMSDetails
│ └── ...
You create the two bridge components once inside the Collection Item. Framer then repeats that Collection Item for every CMS record.
Do not manually create one pair for every project.
5. Create Your CMS Collection
Create a Framer CMS collection for your slides.
For example:
Projects
Recommended fields:
Slider Parallax CMS— Framer Installation Guide
1. Copy and paste the SliderParallax link to the canvas
After copy and paste the link accepts and saves the code:
The default export in the supplied code is the main slider:
SliderParallax
The component defaults include:
Source: Manual
Direction: Vertical
Theme: Default
Navigation buttons: On
Pagination: On
Keyboard controls: On
Mouse wheel controls: On
Autoplay: Off
The underlying component defines these defaults directly.
For a full-screen hero slider, set the component approximately to:
Width: Fill / 100%
Height: 100vh
The code itself also defaults to width="100%" and height="100vh".
2. Test It in Manual Mode First
Before connecting CMS, confirm that the component works.
Select SliderParallax.
Under its properties, set:
Source → Manual
The component contains built-in sample slides, so it can display content even before you create your own slide data.
You should see a large image slider with content such as titles, description, metadata, CTA button, navigation and pagination.
If that works, the component itself is installed correctly.
3. Configure Basic Slider Settings
With SliderParallax selected, use the properties panel.
Source
Choose:
Manual
or:
Framer CMS
The code explicitly provides these two Source options.
Theme
Choose between:
Default Theme
Carousel Theme
Direction
Choose:
Vertical
or
Horizontal
The component exposes both options.
Navigation
Use:
Navigation → Show
You can also control whether navigation appears permanently or only while hovering.
Pagination
Enable:
Pagination → Show
The component supports regular labels as well as thumbnail-style pagination.
Interaction
You can enable or disable:
Keyboard controls
Mouse wheel controls
Hover slide behavior
Autoplay
4. Connecting the Slider to Framer CMS
This is the important part.
The component has a custom CMS bridge architecture.
It exports two additional components:
SliderParallaxCMSMain
and
SliderParallaxCMSDetails
The source specifically says that both bridge components should be placed inside the same repeated Collection Item.
Your structure should effectively be:
SliderParallax
│
└── CMS Content
│ └── Collection List
│ ├── Collection Item
│ ├── SliderParallaxCMSMain
│ └── SliderParallaxCMSDetails
│
├── Collection Item
│ ├── SliderParallaxCMSMain
│ └── SliderParallaxCMSDetails
│ └── ...
You create the two bridge components once inside the Collection Item. Framer then repeats that Collection Item for every CMS record.
Do not manually create one pair for every project.
5. Create Your CMS Collection
Create a Framer CMS collection for your slides.
For example:
Projects
Recommended fields:
| CMS Field | Suggested Type |
|---|---|
| Category | Text |
| Image | Image |
| Video | File / Video |
| Title 1 | Text |
| Title 2 | Text |
| Description | Text |
| Meta 1 Label | Text |
| Meta 1 Value | Text |
| Meta 2 Label | Text |
| Meta 2 Value | Text |
| Meta 3 Label | Text |
| Meta 3 Value | Text |
| Button Text | Text |
| Button Link | Link |
| Overlay | Text |
| Overlay Opacity | Text / Number |
| Card Position | Text |
You don't necessarily have to use every field.
For example, a CMS item could contain:
Category
Residential
Title 1
Coastal
Title 2
Retreat
Description
A sanctuary of modern design...
Meta 1 Label
Location
Meta 1 Value
Malibu, CA
Meta 2 Label
Year
Meta 2 Value
2026
Meta 3 Label
Area
Meta 3 Value
850 m²
Button Text
Explore Project
6. Create a Collection List
On your Framer page:
Insert a Collection List.
Connect it to your CMS collection.
Open/edit its repeated Collection Item.
This Collection List acts as the data source that the main SliderParallax component reads.
7. Add SliderParallaxCMSMain
Inside the repeated Collection Item, insert:
SliderParallaxCMSMain
The component exposes the following controls:
Category
Image
Video
Title 1
Title 2
Description
Overlay
Opacity
These are defined directly by the supplied component.
Connect each property to its corresponding CMS field.
For example:
SliderParallaxCMSMain
Category
→ CMS: Category
Image
→ CMS: Image
Video
→ CMS: Video
Title 1
→ CMS: Title 1
Title 2
→ CMS: Title 2
Description
→ CMS: Description
Overlay
→ CMS: Overlay
Opacity
→ CMS: Overlay Opacity
The Image field is particularly important. Internally, the slider discards a CMS record if it cannot obtain an image source from the bridge.
So make sure every slider record intended for display has an image.
8. Add SliderParallaxCMSDetails
Now place the second component inside the same Collection Item:
SliderParallaxCMSDetails
Connect:
Meta 1 Label
→ CMS: Meta 1 Label
Meta 1 Value
→ CMS: Meta 1 Value
Meta 2 Label
→ CMS: Meta 2 Label
Meta 2 Value
→ CMS: Meta 2 Value
Meta 3 Label
→ CMS: Meta 3 Label
Meta 3 Value
→ CMS: Meta 3 Value
Button Text
→ CMS: Button Text
Button Link
→ CMS: Button Link
Card Position
→ your preferred value
The helper component supports exactly these properties.
Again, keep:
SliderParallaxCMSMain
and
SliderParallaxCMSDetails
inside the same repeated Collection Item.
That pairing is intentional. The slider searches for the Details bridge belonging to each Main bridge and specifically avoids crossing into another repeated CMS item.
9. Connect the Collection List to SliderParallax
Return to the main:
SliderParallax
Select it.
Change:
Source → Framer CMS
A new property should appear:
CMS Content
The component intentionally hides this setting while Source is Manual and exposes it when Source is CMS.
Connect:
CMS Content → your complete Collection List
This is important:
Do not connect an individual CMS item.
Connect the complete repeated Collection List.
The source itself describes this control as:
“Connect the complete Framer Collection List.”
Your final relationship should therefore be:
SliderParallax
│
│ CMS Content
▼
Collection List
│
├── Collection Item #1
│ ├── SliderParallaxCMSMain
│ └── SliderParallaxCMSDetails
│
├── Collection Item #2
│ ├── SliderParallaxCMSMain
│ └── SliderParallaxCMSDetails
│ └── Collection Item #3
├── SliderParallaxCMSMain
└── SliderParallaxCMSDetails
10. Overlay Options
For each slide, the CMS Main bridge supports:
bottomFade topFade centerVignette solidDark none
These correspond to:
Bottom Fade
Top Fade
Center Vignette
Solid Dark
No Overlay
The available values are defined directly in the component's property controls.
A good starting point is:
Overlay: bottomFade Opacity: 0.65
11. Per-Slide Card Position
SliderParallaxCMSDetails also supports a different content-card position for each CMS slide.
Available values are:
inherit topLeft topRight centerLeft centered centerRight bottomLeft bottomRight
inherit means:
Use the SliderParallax global card position.
The available per-slide positions are defined by the component's CMS property control.
For example:
Project 1 → bottomLeft Project 2 → centerRight Project 3 → topLeft
This lets the CMS positioning adapt to the composition of each photograph.
The bridge components themselves are effectively invisible data carriers, so don't worry if they don't look like normal visual cards.
12. Preview the Slide
Once CMS is connected, use Preview instead of relying only on the editor canvas.
The component has special handling for Framer's Canvas/static renderer versus the live site, and it reads CMS records after Framer hydrates the Collection List.
So always verify:
Canvas
Preview
Published page
especially after connecting CMS.
13. If the Slider Is Blank
Check these items in order.
A. Source is wrong
Make sure:
Source → Framer CMS
not Manual.
B. CMS Content isn't connected
Select SliderParallax and make sure:
CMS Content → Collection List
C. You connected a Collection Item instead of the Collection List
Connect the whole Collection List.
D. CMSMain is missing
Every repeated Collection Item should contain:
SliderParallaxCMSMain
E. CMSDetails is in the wrong location
It should be inside the same repeated Collection Item as CMSMain.
The code intentionally searches locally for the matching Details bridge.
F. Image isn't connected
Make sure:
SliderParallaxCMSMain → Image → CMS Image
A slide without a valid image is ignored by the bridge reader.
G. You're judging CMS output only from Canvas
Check Framer Preview and the published page too.
You don't necessarily have to use every field.
For example, a CMS item could contain:
Category
Residential
Title 1
Coastal
Title 2
Retreat
Description
A sanctuary of modern design...
Meta 1 Label
Location
Meta 1 Value
Malibu, CA
Meta 2 Label
Year
Meta 2 Value
2026
Meta 3 Label
Area
Meta 3 Value
850 m²
Button Text
Explore Project