---
title: "IMG Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Refinery Studio · Carousels. Advance dynamic parallax carousel"
canonical: "https://framer.elliotli.dev/component/img-carousel"
---

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

# IMG Carousel

Advance dynamic parallax carousel

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

![IMG Carousel preview image 1](https://framer.elliotli.dev/og/component/img-carousel/b83f46ec056699a1/1600x1200.jpg)

## Summary

Advance dynamic parallax carousel

## Description

The image carousel is a flexible media slider built to display images in a visually engaging and interactive format. Each slide can contain structured content including a title, supporting text, and a call-to-action button that links users to additional pages or product destinations.

To enhance visual depth, the carousel includes a hover-based parallax effect that adds subtle movement to images when users interact with them. Designers can also customize slide transitions, navigation controls, and interactive elements to match the style of their website.

## How It Works

### 1\. Add Slides

Inside the settings panel, you can create slides by adding:

-   Image
    
-   Title
    
-   Subtext
    
-   Button text
    
-   Button link
    

Each slide becomes part of the carousel sequence.

### 2\. Choose Navigation Mode

You can control how users move through slides:

-   **Manual** – users navigate using arrows or indicators
    
-   **Autoplay** – slides transition automatically
    
-   **Manual + Autoplay—users** can override autoplay when interacting
    

### 3\. Enable Interaction Effects

The carousel includes a **hover-based parallax effect**, creating subtle depth when users move their cursor over an image.

You can also customize:

-   Slide transitions
    
-   Animation timing
    
-   Interaction responsiveness
    

### 4\. Navigation Controls

The component includes customizable navigation elements such as the following:

-   **Arrows** for forward and backward navigation
    
-   **Indicators** for quick slide selection
    

These controls can be styled to match the overall design of the page.

### 5\. Visual Effects

Optional effects can be applied to enhance the visual style of the carousel:

-   Noise overlay
    
-   Motion blur
    
-   Tint overlay
    
-   Blur effects
    
-   Effects combos
    

These effects help create mood, depth, and stylistic consistency.

### 6\. Cursor Customization

The carousel includes **custom cursor options** that enhance interaction feedback when hovering over slides or navigation elements.

## Use Cases

-   Website hero sections
    
-   Product or collection highlights
    
-   Portfolio galleries
    
-   Brand campaigns
    
-   Landing page storytelling
    
-   Visual marketing sections
    

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

-   All · #4289

## Details

- **Author**: Refinery Studio
- **Published**: 2026-03-19
- **Updated**: 2026-06-27
- **Added**: 2026-03-11
- **Categories**: Carousels

## More like this

-   [Screen Stage Mockup](/component/screen-stage-mockup) — Aisol Studio · $14 — Your screens in synced devices
-   [Team Reel](/component/team-reel) — Ali Musa · Free — Interactive Team Showcase
-   [Slider](/component/slider) — MAS · Free — A smooth, customizable slider.
-   [Cascade Card Slider](/component/cascade-card-slider) — Tim Yeng · Free — Cards that cascade into view