complex

Carousel

A carousel with motion and swipe built using Embla.

Preview

A preview of the Carousel component with interactive controls.

Preview Code
Interactive

Installation

Add the Carousel component to your project.

Bash
ng g @ng-cn/core:c carousel

Usage

Import and use the Carousel component in your Angular application.

Template TypeScript
template.html
<Carousel class="w-full max-w-xs">
  <CarouselContent>
    @for (item of [1, 2, 3, 4, 5]; track item) {
      <CarouselItem>
        <div class="p-1">
          <Card>
            <CardContent class="flex aspect-square items-center justify-center p-6">
              <span class="text-4xl font-semibold">{{ item }}</span>
            </CardContent>
          </Card>
        </div>
      </CarouselItem>
    }
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Examples

Explore different variations and use cases for the Carousel component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' The orientation of the carousel.
class string — Additional CSS classes to apply.