---
title: "Pill Carousel — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Hoshine · Carousels. The Pill Carousel splits your content into an engaging layout: a draggable, scrollable list of navigation pills on one side,…"
canonical: "https://framer.elliotli.dev/component/pill-carousel"
---

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

# Pill Carousel

Interactive dual pane media slider

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

![Pill Carousel preview image 1](https://framer.elliotli.dev/og/component/pill-carousel/6d147eb7ffd28e8a/1600x1200.jpg)

## Summary

The Pill Carousel splits your content into an engaging layout: a draggable, scrollable list of navigation pills on one side, perfectly synchronized with a stack of media cards on…

## Description

Upgrade your Framer site with a highly interactive, dual-pane media carousel. The Pill Carousel splits your content into an engaging layout: a draggable, scrollable list of navigation pills on one side, perfectly synchronized with a stack of media cards on the other.

Built with custom drag physics and smooth requestAnimationFrame interpolation, it provides a premium, app-like feel.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-b022pesm-7AlXGRHRsMTxaTs25wEcXE1O2o0XUu)![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-eael4tz1-Cd5HwRN1J9l5LM1sSt0Bfz18qGf7ME)

**Key Features**

-   **Dual-Pane Synchronization:** Scroll or drag the navigation pills to automatically transition the media cards with smooth, physics-based easing.
    
-   **Infinite Looping:** The component simulates an endless scroll, wrapping your items seamlessly in both directions.
    
-   **Rich Media Support:** Add images or auto-playing, looping videos to your cards via direct file uploads or external URLs.
    
-   **Integrated Iconography:** Native support for Phosphor Icons with variable weight controls (Thin, Light, Regular, Bold, Fill, Duotone) and custom SVG code support.
    
-   **Responsive Layout:** Automatically switches from a horizontal row layout on desktop to a stacked column layout on mobile devices, complete with distinct touch interactions (pan-x vs pan-y).
    

**How to Use**

1.  **Define Items:** Use the Framer property controls to add as many items as needed.
    
2.  **Customize Icons:** Choose between native Phosphor Icons, custom SVG code, or external URL icons for each item.
    
3.  **Configure Layout:** Adjust the mobile breakpoint, pill spacing, card spread, and border radii to match your design system.
    

**Customization Options**

-   **List Items:** Full management for titles, descriptions, icons, and media (Image/Video).
    
-   **Layout & Spacing:** Extensive controls for spacing, container padding, and responsive breakpoints.
    
-   **Typography:** Advanced font controls for all text elements with mobile/desktop overrides.
    
-   **UI Colors:** Deep control over accent colors, backgrounds, borders, and active/inactive pill states.
    
-   **Scroll Behavior:** Toggle "Wheel Scroll" on or off to dictate whether the component captures mouse-wheel movement or allows natural page scrolling.
    

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

-   All · #4647

## Details

- **Author**: Hoshine
- **Price**: $12.00
- **Published**: 2026-05-30
- **Updated**: 2026-07-07
- **Added**: 2026-05-22
- **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