Free
Pro

Carousel

Ply carousel is ply-horizontal-carousel: a sideways-scrolling row of cards with drag and swipe. Install carousel. It is not the gallery slider (fade/slide images) and not range-slider (a numeric track). Older docs mixed those names; the CLI name carousel is this scroller.

When to use

  • A row of albums, products, or tiles that should scroll sideways.
  • When several items should stay visible at once, not one full-bleed slide.

When not to use

  • Image decks with captions, indicators, and autoplay — install slider (gallery carousel).
  • A volume or price track — use range-slider or dual-range-slider.

Install with npx ply-ui-cli add carousel.

free

View source

Need fade/slide image decks with captions and autoplay? That is gallery slider (npx ply-ui-cli add slider). A numeric track is range-slider.

Horizontal scroller

A CSS-grid row that scrolls sideways. Mouse drag and touch swipe are built in.

Example Grid

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add carousel

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add carousel
// Paths are relative to aliases.components (default: src/app/components)
import { HorizontalCarouselComponent } from './carousel/carousel.component';

@Component({
  selector: 'app-your-component',
  imports: [
    HorizontalCarouselComponent
  ],
  template: `...`
})
export class YourComponent {}

API for carousel — generated from JSDoc in the library source.

API reference for carousel
APIMemberTypeDefaultDescription
ply-horizontal-carouselclassstring''Additional host CSS classes (merged via cn()).
ply-horizontal-carouseltitlestring''—