Gallery Carousel

Ply slider is the gallery carousel: full-bleed slides, captions, autoplay, and crossfade. Selectors ply-carousel and ply-gallery-slider. Install slider. For a row of cards install carousel. For a numeric thumb install range-slider. CLI gallery, image-slider, and slideshow still map to this gallery.

When to use

Hero or product image decks that show one slide at a time.
When you need captions, indicators, or interval autoplay.

When not to use

A horizontal card scroller — use carousel (ply-horizontal-carousel).
A form range input — use range-slider.

Install with npx ply-ui-cli add slider.

free

View source

Slides Only

The simplest way to use the carousel is by passing an array of slide URLs.

HTML

<ply-carousel [slides]="images" [interval]="3000"></ply-carousel>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add slider
// Paths are relative to aliases.components (default: src/app/components)
import { CarouselCaptionComponent } from './slider/carousel-caption/carousel-caption.component';
import { CarouselItemComponent } from './slider/carousel-item/carousel-item.component';
import { GallerySliderComponent } from './slider/gallery-slider.component';
import { SliderDirective } from './slider/slider.directive';

@Component({
  selector: 'app-slider-example',
  imports: [
    CarouselCaptionComponent,
    CarouselItemComponent,
    GallerySliderComponent,
    SliderDirective
  ],
  template: `...`
})
export class SliderExampleComponent {}

Install

bash

npx ply-ui-cli add slider

Modular Structure

Use ply-carousel-item for more control over slide content.

Custom Slide Content

HTML

<ply-carousel [interval]="0" [wrap]="false">
  <ply-carousel-item>
    <img [src]="images[0]" class="w-full h-full object-cover">
  </ply-carousel-item>
  <ply-carousel-item>
    <div class="h-full w-full bg-slate-900 flex items-center justify-center">
      <h2 class="text-white text-3xl font-bold">Custom Slide Content</h2>
    </div>
  </ply-carousel-item>
  <ply-carousel-item>
    <img [src]="images[1]" class="w-full h-full object-cover">
  </ply-carousel-item>
</ply-carousel>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add slider
// Paths are relative to aliases.components (default: src/app/components)
import { CarouselCaptionComponent } from './slider/carousel-caption/carousel-caption.component';
import { CarouselItemComponent } from './slider/carousel-item/carousel-item.component';
import { GallerySliderComponent } from './slider/gallery-slider.component';
import { SliderDirective } from './slider/slider.directive';

@Component({
  selector: 'app-slider-example',
  imports: [
    CarouselCaptionComponent,
    CarouselItemComponent,
    GallerySliderComponent,
    SliderDirective
  ],
  template: `...`
})
export class SliderExampleComponent {}

Install

bash

npx ply-ui-cli add slider

Captions

Add rich captions to slides using ply-carousel-caption.

Slide 1 Label

Detailed description content for slide index 0.

Slide 2 Label

Detailed description content for slide index 1.

Slide 3 Label

Detailed description content for slide index 2.

Slide 4 Label

Detailed description content for slide index 3.

HTML

<ply-carousel [interval]="5000">
  @for (img of images; track img; let i = $index) {
  <ply-carousel-item>
    <img [src]="img" class="w-full h-full object-cover">
    <ply-carousel-caption>
      <h5 class="text-white text-xl font-bold">Slide {{i + 1}} Label</h5>
      <p class="text-white">Detailed description content for slide index {{i}}.</p>
    </ply-carousel-caption>
  </ply-carousel-item>
  }
</ply-carousel>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add slider
// Paths are relative to aliases.components (default: src/app/components)
import { CarouselCaptionComponent } from './slider/carousel-caption/carousel-caption.component';
import { CarouselItemComponent } from './slider/carousel-item/carousel-item.component';
import { GallerySliderComponent } from './slider/gallery-slider.component';
import { SliderDirective } from './slider/slider.directive';

@Component({
  selector: 'app-slider-example',
  imports: [
    CarouselCaptionComponent,
    CarouselItemComponent,
    GallerySliderComponent,
    SliderDirective
  ],
  template: `...`
})
export class SliderExampleComponent {}

Install

bash

npx ply-ui-cli add slider

Crossfade & Dark Variant

Enable transition="crossfade" and [dark]="true" for light backgrounds.

First fading slide

This variant is perfect for light themed backgrounds.

Second fading slide

Notice the dark indicators and controls.

HTML

<ply-carousel transition="crossfade" [dark]="false" [interval]="2000">
  <ply-carousel-item>
    <div class="relative w-full h-full">
      <img [src]="images[2]" class="w-full h-full object-cover">
      <div class="absolute inset-0 flex items-center justify-center text-center bg-black/30">
        <div class="text-white">
          <h3 class="text-2xl font-bold opacity-0 in-[.active]:animate-fadeInDown">First fading slide</h3>
          <p class="opacity-0 in-[.active]:animate-fadeInUp">This variant is perfect for backgrounds.</p>
        </div>
      </div>
    </div>
  </ply-carousel-item>
  <ply-carousel-item>
    <!-- ... -->
  </ply-carousel-item>
</ply-carousel>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add slider
// Paths are relative to aliases.components (default: src/app/components)
import { CarouselCaptionComponent } from './slider/carousel-caption/carousel-caption.component';
import { CarouselItemComponent } from './slider/carousel-item/carousel-item.component';
import { GallerySliderComponent } from './slider/gallery-slider.component';
import { SliderDirective } from './slider/slider.directive';

@Component({
  selector: 'app-slider-example',
  imports: [
    CarouselCaptionComponent,
    CarouselItemComponent,
    GallerySliderComponent,
    SliderDirective
  ],
  template: `...`
})
export class SliderExampleComponent {}

Install

bash

npx ply-ui-cli add slider

Horizontal scroller

This page is the image/content deck (npx ply-ui-cli add slider, selectors ply-carousel / ply-gallery-slider). A row of cards is a different registry item: carousel (ply-horizontal-carousel). npx ply-ui-cli add carousel installs that scroller, not this gallery.

Installation

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

bash

npx ply-ui-cli add slider

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 slider
// Paths are relative to aliases.components (default: src/app/components)
import { CarouselCaptionComponent } from './slider/carousel-caption/carousel-caption.component';
import { CarouselItemComponent } from './slider/carousel-item/carousel-item.component';
import { GallerySliderComponent } from './slider/gallery-slider.component';
import { SliderDirective } from './slider/slider.directive';

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

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

API reference for slider
API	Member	Type	Default	Description
`ply-carousel-caption`	`—`	`—`	—	A caption overlay for a gallery slider or carousel item, typically positioned over the image.
`ply-carousel-item`	`class`	`string`	`''`	Additional CSS classes to merge into the host element.
`ply-carousel-item`	`interval`	`number`	`-1`	Optional override for the auto-play interval when this specific slide is active.
`ply-gallery-slider, ply-carousel`	`class`	`string`	`''`	Additional CSS classes to merge into the host element.
`ply-gallery-slider, ply-carousel`	`activeIndex`	`number`	`0`	The zero-based index of the currently active slide.
`ply-gallery-slider, ply-carousel`	`animate`	`boolean`	`true`	Whether transitions are animated.
`ply-gallery-slider, ply-carousel`	`dark`	`boolean`	`false`	Applies a dark-themed visual overlay/buttons.
`ply-gallery-slider, ply-carousel`	`direction`	`'next' \| 'prev'`	`'next'`	Defines the transition direction explicitly.
`ply-gallery-slider, ply-carousel`	`interval`	`number`	`5000`	Milliseconds before auto-advancing to the next slide. Set to 0 to disable.
`ply-gallery-slider, ply-carousel`	`pause`	`'hover' \| false`	`'hover'`	Whether to pause autoplay on hover.
`ply-gallery-slider, ply-carousel`	`touch`	`boolean`	`true`	Whether touch swipe navigation is enabled.
`ply-gallery-slider, ply-carousel`	`transition`	`'slide' \| 'crossfade'`	`'slide'`	The animation transition style.
`ply-gallery-slider, ply-carousel`	`wrap`	`boolean`	`true`	Whether the carousel loops back to the start when reaching the end.
`ply-gallery-slider, ply-carousel`	`slides`	`string[]`	`[]`	Optional array of image source URLs for a quick image-only slider.
`ply-gallery-slider, ply-carousel`	`(itemChange)`	`number`	—	Emitted whenever the active slide index changes.
`[plySlider]`	`(slideAction)`	`boolean`	—	The slideAction output property.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 218 components and blocks (128 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).