---
title: "UltimateImageSlider — Framer component · Best of Framer"
description: "$15.00 · Framer component · by Muhammad Hassan · Carousels. The ultimate 360° image comparison"
canonical: "https://framer.elliotli.dev/component/ultimateimageslider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/UltimateImageSlider

# UltimateImageSlider

The ultimate 360° image comparison

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

![UltimateImageSlider preview image 1](https://framer.elliotli.dev/og/component/ultimateimageslider/126344461c6083f3/1600x1200.jpg)

## Summary

The ultimate 360° image comparison

## Description

**Experience the most versatile image comparison component for Framer.**

Whether you are a photographer showcasing "Before & After" edits, a designer presenting a brand refresh, or a developer highlighting code transformations, Omni-Angle provides a high-end, interactive experience that fits any site aesthetic.

Unlike standard sliders, **Omni-Angle** breaks the horizontal barrier, allowing you to set the comparison line at any degree while maintaining perfect drag physics.

**Key Features**

-   **360° Rotation:** Set your comparison angle to vertical, horizontal, or any diagonal degree.
    
-   **3 Visual Themes:**
    
    -   **Glassy:** Modern frosted-glass look with high-end backdrops.
        
    -   **Neumorphic:** Soft, extruded UI for clean, tactile designs.
        
    -   **Minimal:** Bold and direct, focusing entirely on the content.
        
-   **Dynamic Labels:** Responsive "Before/After" tags that intelligently fade to avoid handle overlap.
    
-   **Safe-Zone Logic:** Smart padding ensures your labels never get clipped by rounded corners.
    
-   **High Performance:** Optimized with clip-path masks and framer-motion for buttery smooth 60FPS interactions.
    

**Component Properties**

**PropertyDescriptionBefore/After Images**Easy image upload slots for both comparison layers.**Variant**Switch between Glassy, Neumorphic, and Minimal presets.**Angle**A 0° to 360° slider to rotate the comparison axis.**Handle Color**Custom color picker for the handle line and icons.**Handle Size**Adjust the diameter of the interactive drag pill.**Start Position**Set where the slider starts (default is 50%).**Radius**Adjust the corner roundness of the entire container.**Labels**Toggle to show/hide "Before" and "After" text overlays.

**How to Use**

1.  **Drag and Drop:** Place the component into any Frame in your project.
    
2.  **Upload Content:** Set your "Before" and "After" images in the properties panel.
    
3.  **Choose Your Vibe:** Select a theme variant that matches your site's design system.
    
4.  **Set the Angle:** Use the Angle slider to create unique diagonal comparisons for a more dynamic look.
    
5.  **Go Live:** No code or extra setup required!
    

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

-   All · #9859

## Details

- **Author**: Muhammad Hassan
- **Price**: $15.00
- **Published**: 2026-05-12
- **Updated**: 2026-05-12
- **Added**: 2026-04-30
- **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