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

Modular Structure

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

Custom Slide Content

HTML

Captions

Add rich captions to slides using base-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

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

Horizontal Carousel

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

Installation

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

npx base-ui-cli add slider

npx -y base-ui-mcp

// Install: npx base-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 {}