Overview

Carousel

Archetype component oriented toward galleries and scrollable cards.

When to Use It

Visual content showcase
Catalogs with cards
Highlighting elements with preview

Operational Notes

Configuration via archetypes.carousel in metadata
Supports item template and responsive options

md_props_bag: archetypes.carousel

Snippet 1JSON

{
  "archetypes": {
    "carousel": {
      "advancedFilter": false,
      "imageFieldName": "image",
      "descriptionFieldName": "description",
      "imageWidth": 300,

advancedFilter: when true, shows the wuic-filter-bar for the carousel archetype (at data-repeater level).
imageFieldName: image metadata field.
descriptionFieldName: description metadata field.
imageWidth: image width.
pageSize: data page batch size.
numVisible: number of visible cards.
numScroll: number of cards per scroll advance.
usePreview: enables image preview/zoom.
itemTemplateString: custom card template.
responsiveOptions[]: responsive rules.
responsiveOptions[].breakpoint: CSS breakpoint (e.g., 1024px).
responsiveOptions[].numVisible: visible at that breakpoint.
responsiveOptions[].numScroll: scroll at that breakpoint.

Template Context (`itemTemplateString`)

The following inputs are available in the custom template:

record: alias of the current record (item).
rowData: alias of the current record (item).
metaInfo: datasource table/column metadata.
datasource: reference to the associated datasource component.

Runtime context used by the framework:

Snippet 2ts

inputs: { record: item, rowData: item, metaInfo: metaInfo, datasource: datasource }

Events and Subscriptions (Host)

Events available on wuic-carousel-list:

onCarouselPage: p-carousel paging relay (onPage).
onCarouselItemClick: click on carousel item (item + originalEvent).
onCarouselDataBound: emitted when the wrapper completes data binding from the datasource.

Template example:

Snippet 3HTML

<wuic-carousel-list
  [hardcodedDatasource]="citiesDs"
  (onCarouselPage)="handleCarouselPage($event)"
  (onCarouselItemClick)="handleCarouselItemClick($event)"
  (onCarouselDataBound)="handleCarouselDataBound($event)">
</wuic-carousel-list>

Subscribe example (ViewChild):

Snippet 4ts

@ViewChild(CarouselListComponent) carousel?: CarouselListComponent;
private readonly subs = new Subscription();

ngAfterViewInit(): void {
  if (!this.carousel) return;
  this.subs.add(this.carousel.onCarouselPage.subscribe((e) => console.log(e)));
  this.subs.add(this.carousel.onCarouselItemClick.subscribe((e) => console.log(e)));