Carousel
@xui/carouselA slideshow with arrows, dot indicators, keyboard support and optional autoplay (paused on hover). Choose the sliding (scrollx) or crossfade (fade) transition.
Install
pnpm add @xui/carousel Add the barrel to a standalone component's imports:
import { XuiCarouselImports } from '@xui/carousel';
@Component({
imports: [XuiCarouselImports],
// …
})Examples
Basic
Loading preview…
<xui-carousel class="w-[560px]">
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-sky-600 text-3xl font-semibold text-white">1</div>
</xui-carousel-item>
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-indigo-600 text-3xl font-semibold text-white">
2
</div>
</xui-carousel-item>
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-emerald-600 text-3xl font-semibold text-white">
3
</div>
</xui-carousel-item>
</xui-carousel>Autoplay
Loading preview…
<xui-carousel autoplay [interval]="2000" class="w-[560px]">
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-rose-600 text-3xl font-semibold text-white">1</div>
</xui-carousel-item>
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-amber-600 text-3xl font-semibold text-white">
2
</div>
</xui-carousel-item>
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-teal-600 text-3xl font-semibold text-white">3</div>
</xui-carousel-item>
</xui-carousel>Fade
Loading preview…
<xui-carousel effect="fade" class="w-[560px]">
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-fuchsia-600 text-3xl font-semibold text-white">
1
</div>
</xui-carousel-item>
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-cyan-600 text-3xl font-semibold text-white">2</div>
</xui-carousel-item>
<xui-carousel-item>
<div class="flex h-56 w-full items-center justify-center bg-lime-600 text-3xl font-semibold text-white">3</div>
</xui-carousel-item>
</xui-carousel>API
One slide inside {@link XuiCarousel}. Its projected content is the slide.
A slideshow of <xui-carousel-item> slides with arrows, dot indicators and optional autoplay (paused on hover). effect slides (scrollx) or crossfades (fade); index is two-way bindable.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''indexnumberZero-based index of the visible slide. Two-way bindable with [(index)].0autoplaybooleanAdvance on a timer. Pauses while the pointer is over the carousel, and does nothing with a single slide.falseintervalnumberMilliseconds between automatic advances. Only used with autoplay.3000dotsbooleanShow the per-slide indicators. Hidden anyway when there is only one slide.truearrowsbooleanShow the previous/next buttons. Hidden anyway when there is only one slide.trueloopbooleanWrap around at either end. With this off, the arrows stop at the first and last slide.trueeffect'scrollx' | 'fade'How slides change: sliding horizontally (scrollx, direction-aware in RTL) or cross-fading in place (fade).'scrollx'Methods
next(): voidprev(): void