---
title: "ParallaxSlider Pro — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Hamim Reza · Carousels. Infinite parallax slider with minimap."
canonical: "https://framer.elliotli.dev/component/parallaxslider-pro"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/ParallaxSlider Pro

# ParallaxSlider Pro

Infinite parallax slider with minimap.

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

![ParallaxSlider Pro preview image 1](https://framer.elliotli.dev/og/component/parallaxslider-pro/c54df2942a5666d6/1600x1200.jpg)

## Summary

Infinite parallax slider with minimap.

## Description

An infinite vertical image slider with parallax depth, silky lerp-smooth scrolling, and a live minimap preview. Built for portfolios, product showcases, and visual storytelling that demands more than a static grid.

## What's Included

One self-contained Framer code component. No third-party libraries, no external dependencies. Add it to your canvas, connect your images, and it works instantly.

## Features

-   Infinite loop scrolling in both directions with no visible seam
    
-   Parallax effect — images move at 20% of scroll speed creating real depth
    
-   Lerp-based motion smoothing for buttery 60fps scroll animation
    
-   Auto-snap to the nearest image after scrolling stops
    
-   Live minimap preview thumbnail showing the next upcoming image
    
-   Toggle minimap on or off with a single prop
    
-   Mouse wheel, click-drag, and touch gesture support
    
-   Virtual rendering — only visible images are in the DOM at any time
    
-   Up to 20 images supported
    

## Property Controls

**Scroll Behavior** Fine-tune exactly how the slider feels to use.

-   Scroll Speed — how fast scrolling responds to input (0.1–3)
    
-   Smoothness — lerp factor controlling motion lag (0.01–0.5)
    
-   Snap Duration — animation time for snapping to an image (100–2000ms)
    
-   Max Velocity — caps maximum scroll speed to prevent over-flicking (20–500)
    

**Visual Controls** Dial in the parallax intensity and minimap size.

-   Show Minimap — toggle the preview thumbnail on or off
    
-   Minimap Width — thumbnail width from 40px to 300px
    
-   Minimap Height — thumbnail height from 100px to 600px
    
-   Image Scale — main image parallax scale factor (1–3)
    
-   Minimap Image Scale — minimap thumbnail scale factor (1–3)
    

**Content** Add up to 20 images via URL or direct Framer Asset upload.

## How It Works

**Infinite Loop** Images repeat endlessly in both directions using modulo arithmetic. There are no clones or duplicated DOM nodes — just clean index wrapping.

**Parallax Engine** Each image is scaled beyond its container and translated vertically at 20% of scroll speed. As you scroll, the image reveals different portions of the frame, creating genuine depth without CSS hacks.

**Lerp Smoothing** Every frame, the rendered scroll position moves a fraction of the distance toward the target position. This creates the characteristic ease-out feel that makes the slider feel premium and physical.

**Auto-Snap** After 100ms of no scroll input, the component calculates the nearest image center and animates smoothly to it using cubic easing. Snap duration is fully configurable.

**Minimap Preview** A fixed thumbnail panel shows the next upcoming image in real time. As the active index changes, the minimap updates instantly — giving users a clear sense of what is coming next as they scroll.

**Virtual Rendering** Only images within the visible viewport plus a small buffer zone are rendered at any time. This keeps DOM nodes minimal and performance consistent regardless of how many images are in the array.

## Technical Details

-   RequestAnimationFrame drives all animation — no CSS transitions
    
-   Custom lerp smoothing on scroll position every frame
    
-   Cubic easing on snap animations for natural deceleration
    
-   Separate refs for main images and minimap thumbnails
    
-   Modulo index mapping for true infinite looping
    
-   Prevents default wheel behavior for precise scroll control
    
-   useMemo and useCallback prevent unnecessary recomputations
    
-   Refs for DOM manipulation avoid re-renders during animation loop
    

## Default Settings

-   5 sample images
    
-   0.75 scroll speed · 0.06 smoothness · 500ms snap duration
    
-   Minimap visible · 120px wide · 200px tall
    
-   1.3 image scale · 1.3 minimap scale
    

## Requirements

Framer Sites 2024 or later. Images must be accessible via public URL or uploaded directly as Framer Assets. External image URLs require proper CORS headers on the host server.

## Use Cases

Portfolio galleries · Product showcases · Photography collections · Story-telling interfaces · Visual navigation systems · Image carousels · Editorial layouts

**SEO Keywords**

framer parallax slider · infinite image slider framer · parallax scroll framer · framer image carousel · vertical slider framer · framer infinite slider · parallax image slider · framer scroll gallery · smooth scroll framer · framer parallax component · image slider framer · framer carousel component · parallax effect framer · framer code component · infinite carousel framer

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

-   All · #7771

## Details

- **Author**: Hamim Reza
- **Price**: $10.00
- **Published**: 2026-02-25
- **Updated**: 2026-04-14
- **Added**: 2026-02-21
- **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