---
title: "Modern Carousel — Free Framer component · Best of Framer"
description: "Free Framer component · by Rain Ruan · Carousels. Overview Elevate your site's visual appeal with Modern Carousel Slider."
canonical: "https://framer.elliotli.dev/component/modern-carousel"
---

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

# Modern Carousel

Smooth auto-play image slider

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

![Modern Carousel preview image 1](https://framer.elliotli.dev/og/component/modern-carousel/60b25bdc3502479e/1600x1200.jpg)

## Summary

Overview Elevate your site's visual appeal with Modern Carousel Slider.

## Description

## Overview

Elevate your site's visual appeal with **Modern Carousel Slider**. This component is designed to be clean, responsive, and incredibly easy to set up. Whether you need a hero slider, a photography showcase, or a product gallery, this component fits seamlessly into any design system.

It features a unique layout with bottom navigation buttons that align perfectly with the image container, creating a structured and modern look.

## ✨ Key Features

\* **📷 Canvas Preview:** What you see is what you get. The first uploaded image displays directly on the canvas, making layout adjustments a breeze.

\* **⚡️ Auto-Play Support:** Toggle auto-play on or off and customize the interval speed to suit your content.

\* **🎨 Fully Customizable:** Change button colors, background colors, and typography to match your brand identity.

\* **📏 Precision Control:** Adjust font sizes, icon sizes, and corner radius to pixel-perfect standards.

\* **🚀 Smooth Transitions:** High-performance cross-fade animations powered by Framer Motion.

\* 🎛️ Powerful Controls

We've exposed all the necessary properties so you can tweak the design without touching a single line of code.

## Modern Carousel Properties

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-7xolhkwf-s2RGStmmL7iTKTSiRwhult4nnmLpto)

## How to use

1\. Drag the component onto your canvas.

2\. Connect your images via the property panel.

3\. Adjust the **Corner Radius** to match your site's style (Default: 10px).

4\. Customize the **Button Colors** and **Labels** (e.g., "PREV / NEXT").

5\. Publish!

\---

**Updates:**

v1.0.0 - Initial release with responsive controls and canvas preview.

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

-   All · #1388

## Details

- **Author**: Rain Ruan
- **Published**: 2026-01-17
- **Updated**: 2026-02-08
- **Added**: 2026-01-02
- **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