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>