Icons
Icons by @ng-icons/tabler-icons
The component library does not provide icons.
Component Blueprint
Carousel
PreviewComposable scroll-snap carousel primitives with sizing, spacing, orientation, API, plugins, and RTL support.
02 Usage
TS
import { FrCarouselModule } from '@frame-ui-ng/components/carousel';HTML
<section #carousel="frCarousel" frCarousel>
<div frCarouselContent>
<div frCarouselItem>Slide 1</div>
<div frCarouselItem>Slide 2</div>
<div frCarouselItem>Slide 3</div>
</div>
<div frCarouselControls>
<button frCarouselPrevious appearance="outline">Previous</button>
<button frCarouselNext appearance="outline">Next</button>
</div>
<div frCarouselDots>
@for (index of carousel.snapIndexes(); track index) {
<button frCarouselDot [index]="index"></button>
}
</div>
</section>03 Examples
Basic
A basic carousel with a drag-free scroll viewport, slide items, and dots.
Controls
Add optional controls wherever they fit the layout. The default examples place them below the viewport, aligned to the left.
Thumbnails
Use thumbnail controls when users need a stronger visual preview than dots provide.
Orientation
Use orientation="vertical" for a vertical snap carousel.
Options
Pass opts to configure alignment, loop behavior, and direction from one object.
Selection state
Use selectedChange when the surrounding UI needs to react to the active slide. Navigation buttons can be attached with frCarouselPrevious and frCarouselNext.
Showing slide 1 of 5
Plugins
Plugins receive the carousel API and may return a cleanup function for timers or listeners.
04 Custom Styling
Override carousel tokens locally to tune slide width, gap, viewport radius, dots, and thumbnails.
05 Token Inspector
Inspect the carousel root, scroll viewport, slide item, dots, and thumbnails.
06 Design Tokens
Use these CSS custom properties to tune carousel spacing, slide sizing, viewport shape, dots, and thumbnails.
SCSS
--frame-carousel-gap: 1rem;
--frame-carousel-item-size: 100%;
--frame-carousel-viewport-radius: var(--frame-radius-lg);
--frame-carousel-vertical-size: 20rem;
--frame-carousel-control-gap: 0.625rem;
--frame-carousel-control-size: 2.5rem;
--frame-carousel-dot-size: 0.5rem;
--frame-carousel-dot-active-size: 1.75rem;
--frame-carousel-thumb-size: 4.25rem;