---
title: "Slider Interaction — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Carousels. What is Slider Interaction?"
canonical: "https://framer.elliotli.dev/component/slider-interaction"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Slider Interaction

# Slider Interaction

Cinematic circle with fullscreen reveal.

[View on Framer](https://framer.com/marketplace/components/slider-interaction/?via=elliot-li)

![Slider Interaction preview image 1](https://framer.elliotli.dev/og/component/slider-interaction/c31a1b90b98f3d11/1600x1200.jpg)

## Summary

What is Slider Interaction?

## Description

## 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.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## 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**](mailto:contact@teampixel.com.au).

## Rank history [How rankings work →](/terms#rankings)

-   All · #9152

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-13
- **Added**: 2026-05-26
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow