---
title: "Thumbnail Slider Pro — Free Framer component · Best of Framer"
description: "Free Framer component · by Karim Saif · Carousels. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/thumbnail-slider-pro"
---

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

# Thumbnail Slider Pro

Media showcase

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

![Thumbnail Slider Pro preview image 1](https://framer.elliotli.dev/og/component/thumbnail-slider-pro/74c4646f44fa9263/1600x1170.jpg)

## Summary

Media showcase

## Description

**Thumbnail Slider** is a flexible, highly interactive media showcase component for Framer. Featuring an overlay thumbnail navigation gallery, it supports both vertical and horizontal layouts, touch drag gestures, optimized image preloading, and property controls.

## Key Features

-   **Dual Overlay Orientations**: Switch between a right-side vertical thumbnail gallery and a bottom-aligned horizontal gallery.
    
-   **Smart Auto-Scrolling Thumbnails**: Active thumbnail previews automatically scroll into view as slides navigate.
    
-   **Touch & Drag Swipe Gestures**: Built-in gesture engine supporting directional swipe navigation across mobile and desktop.
    
-   **Autoplay & Pause Logic**: Automatic slide cycling with configurable delays, pause-on-hover, and pause-on-focus.
    
-   **Adjacent Image Preloading**: Background preloading for adjacent slides to deliver instant transitions.
    
-   **Accessible Architecture**: Includes ARIA live region updates for screen readers, keyboard focus handling, and per-slide alt text.
    

## Property Controls

**Content**

-   **Slides**: Array list to upload images and set individual accessibility alt text.
    

**Layout**

-   **Orientation**: Choose between Vertical (right-aligned overlay) and Horizontal (bottom-aligned overlay).
    
-   **Aspect Ratio**: Toggle to enforce a locked width-to-height ratio on the container.
    
-   **Ratio**: Numerical value defining the aspect ratio (e.g., 1.77 for 16:9).
    
-   **Thumb Size**: Dimensions for thumbnail preview buttons (40px to 120px).
    

**Behavior**

-   **Autoplay**: Enables automated slide transitions.
    
-   **Delay (ms)**: Time interval between slide updates.
    
-   **Infinite Loop**: Restarts playback from the first slide after reaching the end.
    
-   **Pause Hover**: Pauses transitions while hovering over the component.
    
-   **Pause Focus**: Pauses transitions while interactive focus is inside the slider.
    

**Style & Accessibility**

-   **Radius**: Corner rounding applied to the main container.
    
-   **Aria Label**: Accessibility description for screen readers.
    

## Need Help?

For support, feedback, or feature requests:

-   **X / Twitter**: [@Karim Saif](/community/creator/@karim-saif/)
    
-   **Email**: [karimsaif010@gmail.com](mailto:karimsaif010@gmail.com)
    

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

-   All · #2805

## Details

- **Author**: Karim Saif
- **Published**: 2026-08-12
- **Updated**: 2026-08-19
- **Added**: 2026-08-12
- **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