Dowe Views Documentation

DISPLAY

Carousel

One ordered slide track with native scrolling, predictable controls, and responsive layouts on web, Android, and iOS.

ONE CONTRACT

The same slide model

Web uses overflow scrolling, Android uses Compose lazy scrolling, and iOS uses SwiftUI scrolling.

RESPONSIVE BY DEFAULT

Full-width slides

Examples without slideWidth fill the viewport, so the same source works on desktop and narrow screens.

INTERACTION

Scroll or control

Drag, touch, wheel, keyboard, dots, thumbnails, and arrows update one active slide.

BASIC VARIANTS

Scroll, snap, compose, and change direction

Each example has several slides so the track can be tested with touch, mouse drag, wheel input, and responsive widths.

1. Simple scrollable and draggable

01 / NATIVE SCROLL

Free momentum

The track follows the platform gesture.

02 / POINTER

Touch and drag

Fine pointers get a drag enhancement.

03 / RESPONSIVE

Full-width layout

No second mobile tree is required.

04 / ACCESSIBLE

Keyboard friendly

The native track remains reachable.

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

2. Snapping

Centered snap

One gesture

Stable landing

Same target position

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

3. Right to left

First from right

Native direction stays intact.

RTL flow

The active slide still follows the track.

Same indicators

The generated controls keep their meaning.

Carousel variant:"rtl" scheme:"info" gap:16 indicatorType:"dot"
  slide id:"one"
    Card
      Text
        "Right-to-left flow"
  slide id:"two"
    Card
      Text
        "Native direction"

4. Sticky slides

Sticky label 01

The leading edge stays visible as the track advances.

Sticky label 02

The next card arrives without duplicated markup.

Sticky label 03

The track remains native on every target.

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

NAVIGATION VARIANTS

Controls that stay with the track

Previous and next, dots, thumbnails, and the counter use the same active index. With disableLoop:true the matching edge control becomes disabled on every target.

5. Previous and next controls

01 / START

Try the overlay arrows and the bottom controls.

02 / ACTIVE

Current slide

The counter follows scroll position.

03 / TOUCH

Gesture first

Swipe and confirm the active state.

04 / END

Loop back

The default loop returns to the first slide.

1 / 4

Carousel variant:"controls" scheme:"success" gap:16 showNavigation:true showCounter:true
  slide id:"one"
    Card
      Text
        "Controlled slide"
  slide id:"two"
    Card
      Text
        "Another controlled slide"

6. Interactive dots

Dot one

The dot is a button, not decoration.

Dot two

Selecting it scrolls only this track.

Dot three

Native scroll updates the active dot.

Dot four

Keyboard focus remains visible.

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

7. Thumbnail navigation

LANDSCAPE 01

Forest

Stable id: forest

LANDSCAPE 02

Ocean

Stable id: ocean

LANDSCAPE 03

Sunset

Stable id: sunset

LANDSCAPE 04

Night

Stable id: night

Carousel variant:"thumbnails" scheme:"primary" hideControls:true hideIndicators:true
  slide id:"forest"
    Card
      Text
        "The slide id labels its generated preview."
  slide id:"ocean"
    Card
      Text
        "The thumbnail is also a control."

ADVANCED VARIANTS

Depth and motion without target-specific source

Each advanced example has several slides to exercise the effect. Web uses scroll-linked transforms with a fallback; Android and iOS use native transforms with the same slide order and controls.

8. Cover flow

COVER 01

Focus

COVER 02

Depth

COVER 03

Balance

COVER 04

Return

Carousel variant:"coverFlow" scheme:"secondary" slideWidth:280 gap:20
  slide id:"one"
    Card
      Text
        "Cover flow"
  slide id:"two"
    Card
      Text
        "A second cover"

9. Parallax slideshow

SCENE ONE

Parallax motion

Autoplay advances the same native track as a swipe.

SCENE TWO

Automatic timing

Use the arrows to interrupt the timer.

SCENE THREE

Full-width layout

The slide responds to desktop and mobile width.

SCENE FOUR

Motion optional

Reduced motion keeps the core controls available.

1 / 4

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

10. Stories

A 3D story

Perspective follows the active slide.

Swipe onward

The native gesture remains primary.

Native momentum

The transform never owns the scroll.

A clean finish

The active indicator stays synchronized.

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

11. Smart stack

Morning brief

Small offsets create a layered stack.

Activity

Cards remain independently scrollable.

Weather

Native transforms preserve the intent.

Planning

The stack ends with the same controls.

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

12. Card stack

The first card stays close.

The next one arrives with native scroll.

The track owns motion.

Cards do not replace the platform gesture.

Touch remains primary.

Desktop drag and mobile swipe share one model.

The stack resolves cleanly.

The final card is still reachable.

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

13. Flipbook

The opening

Previous starts disabled at the first page.

The turning point

The counter and arrows follow the page.

The ending

Next ends disabled instead of looping.

The appendix

Four pages make the limit behavior visible.

1 / 4

Carousel variant:"flipbook" scheme:"warning" slideWidth:320 gap:12 showCounter:true disableLoop:true
  slide id:"page-one"
    Card rounded:"sm"
      Text
        "Flipbook page"
  slide id:"page-two"
    Card rounded:"sm"
      Text
        "Another page"

API

Props and parity

Carousel accepts common spacing, sizing, visibility, radius, border, and accessibility props. Every slide requires a stable id and normal view children. Desktop reuses web output; Android and iOS keep the same ordered slides, active index, controls, indicators, and loop rules with native scrolling.

Prop	Type	Default
No data There are no records to display

No data