Skip to content

Implement Material carousel sample #471

@zsoltk

Description

@zsoltk

Based on specs: https://m3.material.io/components/carousel/overview

The simplest solution is possibly a SpotlightModel + a new MotionController derived from SpotlightSlider that has a sliding window mechanism:

  • windowSize = 3 or 4 based on design specs, but should be a constructor arg
  • left, right indices are maintained to be windowSize apart
  • left, right indices are maintained to be pushed around by scrollX – i.e. if the scrollX value would go beyond the values stored in left or right, both of them move in that direction, maintaining their distance = this way the window can be "pushed around" automatically, but the active element can move around within the window bounds
  • ui element target picking is done in 2 phases:
  • 1st phase: windowSize elements are picked from the overall list, with the condition that their index is within left, right
  • 2nd phase: each element in the window is compared against activeIndex to pick the right TargetUiState (small, medium, large)
  • all other elements transition towards a TargetUiState hidden

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions