---
title: "Slide Carousel — Framer component · Best of Framer"
description: "$25.00 · Framer component · by Consta Design · Carousels. Slide Carousel Full-screen hover-reveal."
canonical: "https://framer.elliotli.dev/component/slide-carousel"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Slide Carousel

# Slide Carousel

Hover Slide-in Carousel

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

![Slide Carousel preview image 1](https://framer.elliotli.dev/og/component/slide-carousel/51f189ff2280b097/1600x1200.jpg)

## Summary

Slide Carousel Full-screen hover-reveal.

## Description

## Slide Carousel

Full-screen hover-reveal. Image or video columns wipe in, slide, and blur.

### Why it's different

-   A hand-built reveal interaction, not a simple image swap. Runs on the browser's native Web Animations, with zero external libraries.
    
-   Image or video per column, full-bleed. Only the active video decodes; others pause in sync.
    
-   Inactive columns go black & white on leave (or any color/blend mode); the active stays full color.
    
-   A real backdrop blur ramps up from the base of the active column.
    
-   16 CSS blend modes on the overlay and inactive treatment (Multiply, Screen, Saturation, Color, Luminosity…).
    
-   Reveal wipe follows the cursor's from-to movement, with adjustable parallax slide-in.
    
-   Collapses to a paged carousel on small screens, with optional infinite cycle and stylable nav.
    

### Where it fits

Portfolios, agency and studio heroes, product showcases, photography, fashion, jewelry and luxury, real estate, game and film promos, and any full-width landing section that needs to impress.

### 75+ settings

Up to 50 columns, from a three-up hero to a full image gallery.

-   Per-role typography (title/subtitle/description/button) in rem, em or px via Framer font controls.
    
-   Every fill & hover color, plus accent, dividers, gradient, overlay, inactive tint.
    
-   Independent gaps per text element, and per-side padding on columns and button.
    
-   Separate timing & easing for media reveal and column transition.
    
-   Effects: overlay (color, blur, blend), bottom gradient, active-column blur, inactive tint.
    

### Performance

-   Zero animation dependencies: native Web Animations API, so nothing extra ships to the page.
    
-   Decodes only one video at a time, so full-screen video stays fast.
    
-   Pauses video playback when scrolled out of view (tunable trigger) to save CPU, battery and data.
    
-   GPU-light: heavy backdrop-filter work stays contained.
    
-   Pause can sync to the reveal so video stops exactly when the wipe finishes.
    
-   Top-tier desktop Lighthouse / PageSpeed scores 🟢🟢🟢🟢 on average (96-100, lightweight setup).
    

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

-   All · #5736

## Details

- **Author**: Consta Design
- **Price**: $25.00
- **Published**: 2026-06-18
- **Updated**: 2026-06-18
- **Added**: 2026-06-18
- **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