Slider Interaction

What is 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. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Cinematic circle with fullscreen reveal.