Gallery Carousel

A flexible and responsive carousel component supporting slides, crossfade transitions, autoplay, and indicators, modeled after the CoreUI Angular Carousel.

free

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 Carousel

A responsive, CSS grid-based horizontal carousel that automatically displays multiple items per row.

Example Grid

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

HTML

<ply-horizontal-carousel title="Example Grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
</ply-horizontal-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

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 215 components and blocks (125 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).