Getting Started with Dual Slider Parallax

Thank you for choosing Dual Slider Parallax for your project. This guide will help you set up and tailor the component to your design system.

1. Installation

• Copy to Project: Once purchased, simply copy the DualSlider component into your Framer project.

• Drop into Canvas: Drag the component from your Assets panel directly onto any Frame on your canvas.

• Set Dimensions: Use the component properties panel to set the width and height (default is 100% width and 100vh height).

2. Customizing Your Content

• Slide Management: In the component properties, locate the Slides Container.

• Adding Slides: Click the "+" button to add new slides. Each slide supports:

  • Category: Displayed as an eyebrow label.

  • Media: Select an image or upload a video file.

  • Text: Fill in the Heading Line 1, Heading Line 2, and Body Copy fields.

  • Meta Data: Customize the three label/value pairs for specific project details.

  • Button: Configure the call-to-action text and link.

3. Styling & Configuration

• Typography: Expand the Typography section to map your brand fonts, colors, and text transformations for every piece of text in the slider.

• Layout: Adjust the Content Layout settings to control card position, backdrop blur, and padding.

• Interactivity: Toggle features like Autoplay, Keyboard Control, and Navigation Buttons to fit the flow of your website.

• Appearance: Customize the navigation arrows and pagination dots under their respective sections to ensure they align with your project's UI.

Pro Tip

If you want a specific slide to stand out, you can override the Global Card Position by setting a custom Card Position within the individual slide settings inside the Slides Container.