Custom Slider Arrows

By default, Slider components include built-in navigation arrows that visitors click to advance through slides

Written By Social Hampster

Last updated 2 days ago

By default, Slider components include built-in navigation arrows that visitors click to advance through slides. If you want arrows that match your site's visual design more precisely, you can replace the default arrows with your own custom Framer components.

Default arrow behavior

When Show Arrows is turned on in the Slider props, the component renders a pair of left and right arrow buttons automatically. You can control their color and position using the Arrow Color and Arrow Position props. For many sites, the default arrows are sufficient.

[Screenshot: Add screenshot of a Slider component with the default built-in arrows visible]

Using custom arrow components

If you need arrows that match a specific shape, size, or animation style from your design system, you can attach your own Framer components as the arrows.

Step 1: Design your arrow component in Framer

Create a component in Framer for your left arrow and another for your right arrow. These can be any design — an icon, a button with text, a circle with a chevron, or any other shape. Make sure each is a proper Framer component (not just a frame) so it can be referenced in the props panel.

[Screenshot: Add screenshot of a custom arrow component being created in Framer]

Step 2: Enable custom arrows in the Slider props

  1. Click on your Slider component to select it

  2. In the right-side props panel, find the Use Custom Arrows toggle and turn it on

  3. Two new fields will appear: one for the left arrow component and one for the right arrow component

Step 3: Attach your arrow components

  1. Click the component picker field for the left arrow

  2. Select your custom left arrow component from the list of components in your Framer project

  3. Repeat for the right arrow

Your custom arrows will now appear in place of the default ones. They will behave exactly like the default arrows — clicking them advances or reverses the slider.

[Screenshot: Add screenshot of the custom arrow fields in the Slider props panel with components attached]

Arrow positioning

The Arrow Position prop controls where the arrows are placed relative to the slider, whether you are using default or custom arrows:

Position option

Where the arrows appear

Sides

Left arrow to the left of the slider, right arrow to the right

Bottom

Both arrows appear below the slider, side by side

Overlay

Arrows sit on top of the slides, positioned at the left and right edges

Arrow color (default arrows only)

The Arrow Color prop applies only to the built-in default arrows. If you are using custom arrow components, their colors are controlled by the component design itself in Framer, not by this prop.

Tip: If your custom arrow components use Framer Variables for their colors, they will automatically pick up your site's theme colors, including any dark mode switching you have set up.

Tips for designing custom arrows

  • Keep the hit area (the clickable region) large enough for easy tapping on mobile — at least 44x44px

  • Add a hover state to your arrow component for a better desktop experience

  • Use Framer's interactive states (Default, Hover, Pressed) when designing your arrow component so it responds visually to mouse interactions

  • Make sure the left and right arrows are visually distinct and clearly indicate direction