Dowe

DISPLAY

Carousel

Native-first carousels for web, Android, and iOS with touch, drag, snapping, navigation, and portable 3D presets.

THREE NATIVE TARGETS

One Carousel contract

Web scrolls natively, Android uses Compose gestures, and iOS uses SwiftUI scrolling.

BASIC VARIANTS

Scroll, snap, compose, and change direction

Touch works on every target. Web also adds fine-pointer dragging while preserving native scrolling and accessibility.

1. Simple scrollable and draggable

Native scroll

Touch and drag

No forced snap

Momentum preserved

Carousel variant:"simple" scheme:"primary" slideWidth:220 gap:16 hideControls:true hideIndicators:true
  slide id:"one"
    Card variant:"soft" scheme:"primary"
      Text
        "Native scrolling"

2. Snapping

Centered snap

One gesture

Stable landing

Carousel variant:"snapping" scheme:"secondary" gap:16 indicatorType:"dot"
  slide id:"one"
    Card
      Text
        "Centered snap"

3. Masonry grid

Carousel variant:"masonry" scheme:"tertiary" gap:12
  slide id:"cell-one"
    Card
      Text
        "Grid cell"

4. Right to left

First from right

RTL flow

Native direction

Carousel variant:"rtl" scheme:"info" slideWidth:240 gap:16
  slide id:"one"
    Card
      Text
        "Right-to-left flow"

5. Sticky slides

Sticky label 01

Sticky label 02

Sticky label 03

Carousel variant:"sticky" scheme:"warning" gap:16
  slide id:"one"
    Card
      Text
        "Sticky slide"

NAVIGATION VARIANTS

Buttons, dots, and thumbnails

Every navigation surface follows native scroll position and remains interactive with touch, mouse, keyboard, and assistive technology.

6. Previous and next controls

Current slide

1 / 3

Carousel variant:"controls" scheme:"success" hideIndicators:true showCounter:true
  slide id:"one"
    Card
      Text
        "Controlled slide"

7. Interactive dots

Dot one

Dot two

Dot three

Carousel variant:"dots" scheme:"danger" hideControls:true indicatorType:"dot"
  slide id:"one"
    Card
      Text
        "Dot navigation"

8. Thumbnail navigation

Forest

Ocean

Sunset

Carousel variant:"thumbnails" scheme:"primary" hideControls:true hideIndicators:true
  slide id:"forest"
    Card
      Text
        "The slide id labels its generated preview."

ADVANCED VARIANTS

Portable depth and motion

Web uses scroll-driven animations when available; Android and iOS map the same variants to native transforms. Reduced-motion preferences remove decorative transforms.

9. Cover flow

Cover 01

Cover 02

Cover 03

Carousel variant:"coverFlow" scheme:"secondary" slideWidth:260 gap:24
  slide id:"one"
    Card
      Text
        "Cover flow"

10. Parallax slideshow

SCENE ONE

Parallax motion

SCENE TWO

Automatic timing

1 / 2

Carousel variant:"slideshow" scheme:"info" autoplay:true autoplayInterval:4500 showCounter:true
  slide id:"scene-one"
    Card
      Text
        "Parallax scene"

11. Stories

STORY 01

A 3D story

STORY 02

Swipe onward

STORY 03

Native momentum

STORY 04

A clean finish

Carousel variant:"stories" scheme:"danger" slideWidth:280 gap:20 indicatorType:"dot"
  slide id:"story-one"
    Card
      Text
        "Story content"

12. Smart stack

Morning brief

Activity

Weather

Carousel variant:"smartStack" scheme:"muted" slideWidth:280 gap:20
  slide id:"one"
    Card rounded:"xl"
      Text
        "Smart stack card"

13. Card stack

MESSAGE 01

The first card stays close while the next one arrives.

MESSAGE 02

Native scrolling drives the stack.

MESSAGE 03

Touch remains the primary gesture.

Carousel variant:"cardStack" scheme:"primary" slideWidth:320 gap:16
  slide id:"message-one"
    Card rounded:"xl"
      Text
        "Stacked message"

14. Flipbook

PAGE 01

The opening

PAGE 02

The turning point

PAGE 03

The ending

1 / 3

Carousel variant:"flipbook" scheme:"warning" slideWidth:340 gap:8 showCounter:true
  slide id:"page-one"
    Card rounded:"sm"
      Text
        "Flipbook page"

API

Props

Carousel also accepts common spacing, sizing, visibility, radius, border, and accessibility props. Every slide requires a stable id and normal view children.

Prop	Type	Default
No data There are no records to display

No data