---
title: "Hero Animated Slider — Framer component · Best of Framer"
description: "$15.00 · Framer component · by NOMAN · Carousels. Hero Animated Slider helps you create modern, animated hero sections with multiple slides, smooth transitions, and built-in navigation indicators."
canonical: "https://framer.elliotli.dev/component/hero-animated-slider"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Hero Animated Slider

# Hero Animated Slider

Elegant Animated Hero Slider

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

![Hero Animated Slider preview image 1](https://framer.elliotli.dev/og/component/hero-animated-slider/b8659008426c03c6/1600x1200.jpg)

## Summary

Hero Animated Slider helps you create modern, animated hero sections with multiple slides, smooth transitions, and built-in navigation indicators.

## Description

Hero Animated Slider helps you create modern, animated hero sections with multiple slides, smooth transitions, and built-in navigation indicators. You can control spacing, alignment, typography, animation speed, and progress direction directly from Framer. Designed for flexibility and performance, it’s ideal for landing pages, portfolios, and high-impact marketing sites.

Live Preview: [https://heroslider.framer.website/](https://heroslider.framer.website/)

Key Features

1.  Animated multi-slide hero layout
    
2.  Smooth auto-play with adjustable timing
    
3.  Custom titles, descriptions, and images per slide
    
4.  Horizontal or vertical progress navigation
    
5.  Adjustable spacing, alignment, and distribution
    
6.  Built-in animated progress indicator
    
7.  Fully responsive and performance-optimized
    
8.  No-code customization inside Framer
    

Controls

1.  Frame Padding – Control inner spacing of the slider
    
2.  Frame Distribution – Set spacing behavior between elements
    
3.  Frame Alignment – Adjust vertical layout alignment
    
4.  Title 1 / Title 2 – Edit slide titles
    
5.  Desc 1 / Desc 2 – Edit slide descriptions
    
6.  Image 1 / Image 2 – Add or replace slide images
    
7.  Auto Speed – Control auto-slide duration
    
8.  Transition – Adjust slide transition speed
    
9.  Progress Direction – Horizontal or vertical progress bar
    
10.  Distribution – Align navigation and content
     
11.  Gap – Adjust spacing between elements
     
12.  Line Width – Control progress line length
     
13.  Title Font – Customize title typography
     
14.  Desc Font – Customize description typography
     
15.  Nav Font – Customize navigation text font
     
16.  Counter Font – Customize slide counter font
     

Refund Policy:

Please note that once this component is purchased, it is non-refundable due to its digital nature.

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

-   All · #6723

## Details

- **Author**: NOMAN
- **Price**: $15.00
- **Published**: 2026-02-27
- **Updated**: 2026-02-27
- **Added**: 2026-02-23
- **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