Logo

Carousel

Preview

Composable scroll-snap carousel primitives with sizing, spacing, orientation, API, plugins, and RTL support.

Preview

PrimitiveCompose

Build the viewport, slides, and controls from small directives.

MotionSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

ThemingTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

Usage

TS 

import { FrCarouselModule } from '@frame-ui-ng/components/carousel';

HTML 

<section frCarousel>
  <div frCarouselContent>
    <div frCarouselItem>Slide 1</div>
    <div frCarouselItem>Slide 2</div>
    <div frCarouselItem>Slide 3</div>
  </div>
  <button frCarouselPrevious appearance="outline">
    <ng-icon name="tablerChevronLeft" size="18" />
  </button>
  <button frCarouselNext appearance="outline">
    <ng-icon name="tablerChevronRight" size="18" />
  </button>
</section>

Examples

Basic

A basic carousel with a scrollable content viewport, slide items, and controls.

PrimitiveCompose

Build the viewport, slides, and controls from small directives.

MotionSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

ThemingTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

Sizes

Set --frame-carousel-item-size to show multiple slides in the viewport, similar to basis utilities.

PrimitiveCompose
MotionSnap
ThemingTokenize

Spacing

Set --frame-carousel-gap on the root to control the distance between carousel items.

PrimitiveCompose
MotionSnap
ThemingTokenize

Orientation

Use orientation="vertical" for a vertical snap carousel.

PrimitiveCompose

Build the viewport, slides, and controls from small directives.

MotionSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

ThemingTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

Options

Pass opts to configure alignment, loop behavior, and direction from one object.

Loop enabledCompose
Loop enabledSnap
Loop enabledTokenize

API

Use apiReady, selectedChange, and the carousel API to react to selection changes or control slides.

PrimitiveCompose

Build the viewport, slides, and controls from small directives.

MotionSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

ThemingTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

Slide 1 of 3

Plugins

Plugins receive the carousel API and may return a cleanup function for timers or listeners.

Autoplay pluginCompose

Build the viewport, slides, and controls from small directives.

Autoplay pluginSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

Autoplay pluginTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

RTL support

Set direction through opts to render the scroll viewport and controls in right-to-left layouts.

RTLاتجاه

The carousel can render right-to-left with the direction option.

RTLتنقل

Controls and slide flow follow the configured document direction.

RTLتكوين

Use the same primitives and tokens for bidirectional layouts.

Custom Styling

Override carousel tokens locally to tune slide width, gap, viewport radius, and control placement.

PrimitiveCompose

Build the viewport, slides, and controls from small directives.

MotionSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

ThemingTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

Token Inspector

Inspect the carousel root, scroll viewport, slide item, and positioned controls.

PrimitiveCompose

Build the viewport, slides, and controls from small directives.

MotionSnap

Native scroll snap keeps the carousel smooth without a runtime dependency.

ThemingTokenize

Tune spacing, item width, radius, and control placement with CSS variables.

Design Tokens

Use these CSS custom properties to tune carousel spacing, slide sizing, viewport shape, and control placement.

SCSS 


  --frame-carousel-gap: 1rem;
  --frame-carousel-item-size: 100%;
  --frame-carousel-control-offset: -3rem;
  --frame-carousel-control-size: 2.5rem;
  --frame-carousel-viewport-radius: var(--frame-radius-lg);
  --frame-carousel-vertical-size: 20rem;