How to Add a New Slide -

Hero Slider Pro

How to Add a New Slide - Hero Slider Pro

Follow these steps to add a new slide to the component:

Follow these steps to add a new slide to the component:

1. Duplicate an existing slide

1. Duplicate an existing slide

  • In the Layers panel, select any slide (e.g., desktop-slide4)

  • Duplicate the slide (⌘/Ctrl + D)

👉 This creates a new slide with the same pre-configured structure.

2. Update slide content

2. Update slide content

Replace the image:

  • In the main component, duplicate the image (⌘/Ctrl + D)

  • Rename the image based on its slide order (e.g., image5)

  • In the newly created slide, make the last added image visible and disable all others

3. Add a new thumbnail (preview)

3. Add a new thumbnail (preview)

👉 Each slide requires a corresponding thumbnail in the timeline (root level).

Go to:

  • timeline → thumbnails

Then:

a.

  • Duplicate any existing thumbnail

  • Move it to the end of the list

b.

  • Duplicate the timeline variant

  • Set the correct thumbnail sizes

4. Configure thumbnail (Variables + Tooltip + Click)

4. Configure thumbnail (Variables + Tooltip + Click)

Select the new thumbnail and configure:

Variables:

  • In the top toolbar, click Variables

  • Create a variable (e.g., Thumbnail 5)

Tooltip:

  • Create a variable Tooltip Label 5 Tooltip Label 5

  • Connect it to the thumbnail

Interactions:

  • Open the Interactions section

  • Set: Click → Click 5

5. Connect the thumbnail to the created variables

5. Connect the thumbnail to the created variables

  • Connect all created tokens: Thumbnail Tooltip Click

6. Timeline variables

6. Timeline variables

  • Create tokens: Thumbnail Tooltip

7. Add text content (same principle as images):

7. Add text content (same principle as images):

  • Duplicate the heading in the main slide

  • Enable its visibility

  • Create a variable for the heading text (e.g., Heading 5)

8. Connect slide image

8. Connect slide image

  • Link the main slide image to the corresponding variable (e.g., Thumbnail 5)

9. Add responsive versions

9. Add responsive versions

Create corresponding slide versions:

  • tablet-slide5

  • phone-slide5

⚠️ Important

⚠️ Important

If any step is skipped:

  • the slide will not switch

  • or will not appear in navigation

💡 Recommendations

💡 Recommendations

  • Always duplicate existing elements - do not create from scratch

  • We recommend using no more than 7 slides for optimal performance and usability

👉 A large number of slides may negatively impact user experience and make the component harder to manage.

Create a free website with Framer, the website builder loved by startups, designers and agencies.