---
title: "Product Slideshow + — Free Framer component · Best of Framer"
description: "Free Framer component · by Refinery Studio · Carousels. Interactive product carousel"
canonical: "https://framer.elliotli.dev/component/product-slideshow"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Product Slideshow +

# Product Slideshow +

Interactive product carousel

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

![Product Slideshow + preview image 1](https://framer.elliotli.dev/og/component/product-slideshow/281b8dfaccb4eb30/1600x1200.jpg)

## Summary

Interactive product carousel

## Description

### IMPORTANT: VERSION 1.2

-   Addition of sub-images or image variants
    
-   Addition of Individual and Global Button links
    
-   Button types including primary, secondary, and tertiary button options
    
-   Addition of product variants such as size, color, etc., with price variation and control settings.
    

Each product slide includes structured information:

-   Product Name
    
-   Description
    
-   Price
    
-   Action Button (linked to purchase or external page)
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-i5lnu22r-wY6olMuSZfkLBCHwkqq1wyVJLOXdte)

### How It Works

**1\. Add Products**

Inside the settings panel, you can create product entries by adding:

-   Product image
    
-   Product name
    
-   Product description
    
-   Price
    
-   Button link (external or internal URL)
    

Each entry becomes a slide in the carousel array.

### 2\. Interaction Logic

-   Products are displayed in a horizontal carousel layout.
    
-   Clicking on a product image triggers a scale-up (zoom) animation.
    
-   Users can continue navigating between products while the active one remains visually emphasized.
    

This creates a layered browsing experience: Browse → Click → Focus → Navigate → Purchase

### 3\. Layout & Styling Controls

You can customize:

**• Spacing Adjust** the gap between product items.

**• Scale-Up Size Control:** How large the active image expands when clicked.

**• Image Positioning** Define alignment and placement within the container.

**• Backdrop Title** Add a large background title or contextual heading behind the slideshow for added visual impact.

**• Button Customization: Edit** label text and attach destination links

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-i5lnu22r-ypS7tES1LzLFRmFfaJnCGMeJf5aZT7)

## Use Cases

-   Ecommerce product highlights
    
-   Fashion lookbooks
    
-   Limited edition drops
    
-   Featured collections
    
-   Digital product previews
    
-   Campaign landing pages
    

## Refund Policy

Due to the digital nature of this component, refunds may not be available once the file has been downloaded. If you experience technical issues or require assistance with setup, support is available.

## Support

If you need help with setup or customization:

**Email:** [alipoejules@gmail.com](mailto:hello@refinery.design)

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

-   All · #458

## Details

- **Author**: Refinery Studio
- **Published**: 2026-03-06
- **Updated**: 2026-06-27
- **Added**: 2026-03-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