Carousel

A slide carousel with arrows and dots.

Slide 1

Slide 2

Slide 3

import { BuiCarousel } from 'ng-blatui';

<bui-carousel>
  <div>Slide 1</div>
  <div>Slide 2</div>
</bui-carousel>

Multiple per view

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

<!-- [perView] shows N slides at once -->
<bui-carousel [perView]="2">
  <div class="p-1">Slide 1</div>
  <div class="p-1">Slide 2</div>
</bui-carousel>

Vertical

Slide 1

Slide 2

Slide 3

<!-- orientation="vertical" needs a fixed height on the carousel -->
<bui-carousel class="h-40" orientation="vertical">
  <div class="h-full">Slide 1</div>
  <div class="h-full">Slide 2</div>
</bui-carousel>

Testimonials

“ng-blatui shipped our redesign weeks early.”

— Ada L.

“Signals-first and SSR-ready out of the box.”

— Grace H.

“The most complete Angular UI kit we tried.”

— Alan T.

<!-- slides styled as quote cards -->
<bui-carousel>
  @for (t of testimonials; track t.name) {
    <div class="p-1"><figure>“{{ t.quote }}” — {{ t.name }}</figure></div>
  }
</bui-carousel>

API reference

Inputs

Prop	Type	Default	Description
`orientation`	`CarouselOrientation`	`'horizontal'`	Scroll axis of the carousel.
`perView`	`number`	`1`	Slides visible at once (e.g. 2 or 3 for a multi-item carousel).
`previousLabel`	`string`	—	Accessible label override for the previous-slide button.
`nextLabel`	`string`	—	Accessible label override for the next-slide button.
`goToSlideLabel`	`string`	—	Accessible label override (prefix) for the dot navigation buttons.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`index`	`number`	`0`	Zero-based index of the first visible slide; two-way bindable.

Types

CarouselOrientation — Scroll axis of the carousel: left/right or up/down.

"horizontal" | "vertical"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.