averouiComponent playgroundv0.0.1
Components / Media /Carousel

Carousel

New

Give your content room to move. A flexible carousel for products, galleries and featured collections.

ResponsiveTouch navigationCustom templates

Basic

Browse a collection in groups. Navigation stops at the first and last page.

Bamboo WatchIn stock

Bamboo Watch

$65
Black WatchIn stock

Black Watch

$72
Blue BandLow stock

Blue Band

$79
Items 1 to 3 of 6

Circular and autoplay

Advance every three seconds and loop back to the beginning. Hover, keyboard focus and reduced motion preferences pause automatic playback.

Bamboo WatchIn stock

Bamboo Watch

$65
Black WatchIn stock

Black Watch

$72
Blue BandLow stock

Blue Band

$79
Items 1 to 3 of 6

Responsive

Three cards on wide screens, two below 1200px and one below 768px. Resize the window to see the layout adapt.

Bamboo WatchIn stock

Bamboo Watch

$65
Black WatchIn stock

Black Watch

$72
Blue BandLow stock

Blue Band

$79
Items 1 to 3 of 6

Vertical

Use a fixed viewport height to browse content vertically.

Bamboo WatchIn stock

Bamboo Watch

$65
Items 1 to 1 of 6

Usage and API

import { AvCarousel } from 'avero-ui';

<av-carousel [value]="products" [numVisible]="3" [numScroll]="1"
  [responsiveOptions]="responsiveOptions" [circular]="true"
  ariaLabel="Featured products" (onPage)="onPageChange($event)">
  <ng-template #item let-product let-index="index">
    <img [src]="product.image" [alt]="product.name" />
    <h3>{{ product.name }}</h3>
  </ng-template>
</av-carousel>

Import AvCarousel and supply value with an #item template. The template receives the item and its index. numVisible and numScroll default to 1; scrolling is capped at the visible count to keep every item reachable.

Use responsiveOptions with pixel breakpoints, numVisible and numScroll. The smallest matching breakpoint wins. orientation accepts horizontal or vertical; verticalViewPortHeight defaults to 360px.

Bind [(page)] to control the zero-based page. onPage emits { page } after navigation. circular wraps navigation; autoplayInterval (milliseconds, default 0) also enables looping. showNavigators and showIndicators default to true.

Set ariaLabel to describe the collection. Use Tab to reach controls and the viewport, arrow keys to navigate, and Home / End to jump to the first / last page. Hidden slides cannot receive focus. Swipe along the carousel direction on touch screens.

Autoplay pauses while hovered, focused or in a hidden tab. A pause control is available, and reduced motion disables autoplay and transitions. Customize the accent with --av-carousel-color.

Reference: PrimeNG Carousel.