Carousel native

A horizontally paging scroller; each child is one page.

Children: many

Preview

Loading the renderer…

page

loop

indicators

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Carousel",
          "page": 0,
          "indicators": true,
          "children": [
            "c0-p1",
            "c0-p2",
            "c0-p3"
          ]
        },
        {
          "id": "c0-p1",
          "component": "Card",
          "title": "Page one",
          "description": "Swipe for more"
        },
        {
          "id": "c0-p2",
          "component": "Card",
          "title": "Page two",
          "description": ""
        },
        {
          "id": "c0-p3",
          "component": "Card",
          "title": "Page three",
          "description": ""
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Carousel rendered by the React renderer on Web — **Web** React

Carousel rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Carousel rendered by the Compose renderer on Android — **Android** Compose

Carousel rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-carousel, painted by each native renderer.

Props

Prop	Type	Default	Description
`page`bind	`number`	`0`	The active page index.
`loop`	`boolean`	`false`	Wraps from the last page to the first.
`indicators`	`boolean`	`true`	Shows the page dots.

Events and slots

Name	Kind
`on.change`	event: runs an action

Accessibility

Role: region
Semantics: region, roledescription carousel; each page a group page i of n

Keys	Action
`ArrowLeftArrowRight`	previous/next page while focus is inside
`HomeEnd`	first/last page

Theming

Recipe parts: Carousel/rootCarousel/pageCarousel/indicatorCarousel/controlsCarousel/previousCarousel/next
Keyed by: loopindicators:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme