Skip to main content

Carousel Mode

modeConfig.carousel controls horizontal browsing behavior for featured content. Use carousel when items are best consumed as a swipeable sequence instead of a dense grid or table.

Shared Behavior​

Pagination, search, static filtering, actions, groupings, and gestures work the same as other modes — see the reference pages:

Core Examples​

Manual Navigation​

This version uses fixed item sizing plus visible arrows and indicators.

A standard carousel with explicit item size and visible navigation controls.

Title:Release Notes
Summary:Review the newest changes first.
Status:new
Title:Gallery
Summary:Browse a curated set of visuals.
Status:featured
Title:Roadmap
Summary:See what is queued next.
Status:planned
Title:Weekly Update
Summary:Track the latest rollout progress.
Status:live
const config = {
  zones: {
    content: {
      mode: 'carousel',
      modeConfig: {
        carousel: {
          itemWidth: 280,
          itemHeight: 200,
          gap: 16,
          showIndicators: true,
          showArrows: true,
          infinite: true,
          revolving: true,
          autoPlay: false,
          dragThreshold: 50,
        },
      },
      item: {
        fields: [
          { key: 'title', label: 'Title' },
          { key: 'summary', label: 'Summary' },
          { key: 'status', label: 'Status', renderAs: 'badge' },
        ],
        layout: { type: 'auto' },
      },
    },
  },
};

The controls below show the looping settings and automatic slide advance.

Auto-play with looping enabled, no dot indicators, and auto-sized item height.

Title:Release Notes
Summary:Review the newest changes first.
Status:new
Title:Gallery
Summary:Browse a curated set of visuals.
Status:featured
Title:Roadmap
Summary:See what is queued next.
Status:planned
Title:Weekly Update
Summary:Track the latest rollout progress.
Status:live
const config = {
  zones: {
    content: {
      mode: 'carousel',
      modeConfig: {
        carousel: {
          itemWidth: 260,
          itemHeight: 'auto',
          gap: 12,
          showIndicators: false,
          showArrows: true,
          infinite: true,
          revolving: false,
          autoPlay: true,
          autoPlayInterval: 3000,
          dragThreshold: 40,
        },
      },
      item: {
        fields: [
          { key: 'title', label: 'Title' },
          { key: 'summary', label: 'Summary' },
          { key: 'status', label: 'Status', renderAs: 'badge' },
        ],
        layout: { type: 'auto' },
      },
    },
  },
};

Grouping​

zones.content.groupings works with carousel mode. Each group renders as a separate labeled carousel with an optional collapse control.

Items grouped by team, each group rendering as its own collapsible carousel.

Platform · 2 items (2)
Title:Sprint Planning
Summary:Q1 capacity and scope.
Status:live
Title:Bug Triage
Summary:Prioritize open issues.
Status:scheduled
Design · 2 items (2)
Title:Design Review
Summary:Critique latest mockups.
Status:live
Title:Brand Workshop
Summary:Align on visual language.
Status:new
Operations · 2 items (2)
Title:Retro
Summary:Last sprint retrospective.
Status:featured
Title:Roadmap Sync
Summary:Cross-team alignment session.
Status:planned
zones: {
  content: {
    groupings: [
      {
        fieldKey: 'team',
        collapsible: true,
        renderer: (groupValue, count) => `${groupValue} · ${count} items`,
      },
    ],
  },
}

See Also​