About Slider Interaction

What is Slider Interaction?

Slider Interaction is a high-impact visual component that presents content as circular image or video thumbnails in a horizontal carousel. Clicking the active circle triggers a cinematic clip-path expansion that fills the viewport with a rich detail overlay — complete with statistics, descriptions, and navigable slides. Perfect for nature portfolios, product showcases, travel pages, real estate tours, and data-driven storytelling sections.

Core Features

Circle-to-fullscreen reveal — Click the active circle to trigger a smooth clip-path animation that expands media to fill the entire container, with a staggered text overlay that fades in.
Image and video backgrounds — Each slide supports static images or looping video backgrounds. Upload files directly or paste a URL for full flexibility.
Animated progress ring — A continuous SVG stroke animation sweeps around the active circle, providing a visual timer and polished motion detail.
Direction-aware crossfade navigation — Navigate between expanded slides with smooth background crossfades and horizontally-sliding content that responds to navigation direction.
Dual content stat blocks — Display up to two labelled statistics per slide with large serif numerals, units, and configurable visibility — perfect for data storytelling.
Light, Dark, and Custom theming — Switch between built-in themes or dial in exact colours for background, text, icons, arrows, ring, and overlay opacity.
Fully responsive — Built-in mobile logic automatically adjusts layout, typography, and overlay gradients to ensure your slider looks perfect on any device without extra breakpoints.

Controls inside Framer

Slides

Media Type — Toggle between Image and Video per slide
Upload Video — Upload an MP4 file directly
Video URL — Paste an external video link
Icon Preset — Choose from Trees, Mountains, Waves, Sun, Leaf, or Snowflake
Custom Icon — Upload your own icon image
Title — The bold label displayed below the carousel
Description — Short text shown beneath the active circle
Expanded Title — Large serif heading in the fullscreen overlay
Expanded Description — Supporting paragraph in the overlay
Show Content — Toggle the entire expanded overlay on or off
Block 1 / Block 2 Label, Value, Unit — Configure two stat blocks with full label, numeral, and unit control
Show Block 1 / Show Block 2 — Toggle each stat block independently

Images

Responsive image array for per-slide background overrides

Layout

Circle Size — Active circle diameter from 150px to 400px
Circle Gap — Spacing between circles from 20px to 120px

Animation

Transition Speed — Duration of slide change animations
Progress Ring — Toggle the animated ring on or off
Ring Duration — Control how fast the ring completes a full sweep

Appearance

Show Icons — Toggle icon visibility globally
Theme — Light, Dark, or Custom
Background, Title, Description, Icon, Arrow, Ring colours — Full colour control in Custom mode
Overlay Opacity — Adjust the expanded view gradient darkness

Playback

Auto Play — Enable automatic slide cycling
Interval — Set the auto-advance timing from 2s to 15s

Best use cases

Portfolio hero sections — Showcase photography, videography, or design work with an interactive, gallery-style experience that invites exploration.
Travel and editorial storytelling — Present destinations, ecosystems, or cultural topics with rich imagery, looping video backgrounds, and data overlays.
Product and real estate showcases — Highlight key features or properties with immersive fullscreen reveals and configurable stat blocks.
Data-driven landing pages — Combine visual impact with quantitative storytelling by pairing large hero media with labelled statistics.