chrome:seo.title.page

chrome:demo.preview

demo-preview:carousel.slide-one-product-overview

Index: 0

demo-preview:hints.category.navigation:

Tab

← →

demo-preview:hints.category.focus:

Focus

demo-preview:hints.category.shortcuts:

Enter / Space

import { Component } from '@angular/core';

import { XCarousel, XCarouselSlide } from '@xngui/components/carousel';

@Component({

selector: 'app-example',

imports: [XCarousel, XCarouselSlide],

templateUrl: './carousel.component.html',

})

export class ExampleComponent {}

chrome:demo.events.empty

chrome:demo.api.title

chrome:demo.api.col.property

chrome:demo.api.col.type

chrome:demo.api.col.default

chrome:demo.api.col.description

loop

boolean

true

When true, wraps from last to first slide (and vice versa).

showControls

boolean

true

Shows previous/next buttons and dot indicators when there are multiple slides.

swipeEnabled

boolean

true

When true, horizontal swipes advance slides on touch devices.

autoplayMs

number | null

null

Autoplay interval in ms; `null` disables. Pauses while hovered, focused, or when reduced motion is preferred.

ariaLabel

string

—

Accessible name for the carousel region — falls back to the `carousel.ariaLabel` i18n key.

previousLabel

string

—

`aria-label` for the previous slide button — falls back to `carousel.previous`.

nextLabel

string

—

`aria-label` for the next slide button — falls back to `carousel.next`.

goToSlideLabel

string

—

Prefix for each dot button's `aria-label` — falls back to `carousel.goToSlide`.

generated:catalog.entry.carousel.title

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title

x-carousel

chrome:demo.section

chrome:demo.preview

chrome:demo.events.title

chrome:demo.api.title