Slider Props Reference

Slider components display your posts in a horizontal scrolling carousel.

Written By Social Hampster

Last updated 2 days ago

Slider components display your posts in a horizontal scrolling carousel. They are available for all five platforms (Instagram, Facebook, YouTube, Threads, Dribbble) on the Personal and Business plans. This reference covers all props specific to Slider components.

Plan required: Personal or Business. Slider components are not available on the free plan.

How to access props: Click on any Slider component in your Framer project. The Slider-specific props appear in the props panel on the right side of the Framer editor, alongside the core and card style props.

[Screenshot: Add screenshot of the Slider props section in the Framer props panel]

Slider props

Prop name	Type	What it does	Notes
Show Arrows	Toggle	Shows or hides the left and right navigation arrow buttons	Arrows let visitors click to advance the slider one slide at a time. Turn off if you prefer a swipe-only or auto-scrolling experience.
Arrow Position	Select	Controls where the arrow buttons appear relative to the slider	Options typically include: sides (left and right of the slider), bottom (both arrows below the slider), or overlaid on the slides themselves.
Arrow Color	Color	Sets the color of the arrow icons	Match your brand color or use a neutral that contrasts well against your card images.
Auto Scroll	Toggle	Enables automatic scrolling that advances the slider without any visitor interaction	Good for passive displays like a social wall or featured content section. Works well combined with Loop.
Auto Scroll Interval	Number (milliseconds)	Sets how long the slider waits before moving to the next slide automatically	Default is typically 3000 (3 seconds). Use a higher value like 5000 for slower, more relaxed scrolling. Only applies when Auto Scroll is on.
Loop	Toggle	Makes the slider loop back to the first slide after reaching the last	Recommended when Auto Scroll is on so the carousel never stops. When off, the slider stops at the last slide.
Slides Visible	Number	How many slides are visible at once in the slider	1 shows a single full-width card at a time. 2 or 3 shows multiple cards side by side, giving a peek at adjacent slides. Adjust based on your layout width.
Slide Gap	Number (pixels)	Sets the spacing between individual slides	Separate from the outer component Gap. This controls the space between cards within the slider itself.

Recommended configurations

Auto-playing social wall

Show Arrows: off
Auto Scroll: on
Auto Scroll Interval: 3000
Loop: on
Slides Visible: 3
Slide Gap: 16

Manual browsable carousel

Show Arrows: on
Arrow Position: sides
Auto Scroll: off
Loop: off
Slides Visible: 2
Slide Gap: 20

Full-width single slide hero

Show Arrows: on
Slides Visible: 1
Auto Scroll: on
Auto Scroll Interval: 5000
Loop: on
Slide Gap: 0

Custom arrows: If you want to use your own arrow design instead of the default arrows, see the Custom Slider Arrows article in the Customization section.

[Screenshot: Add screenshot of a Slider component on a Framer page showing the arrow buttons and multiple visible slides]