🎨
Valence
🎨
Valence
  • Overview
    • πŸ‘‹Welcome to Valence
    • πŸ„β€β™‚οΈGetting started
  • Core Concepts
    • Responsiveness
    • Color
      • List of colors
      • Color types
    • Polymorphism
  • Valence Core
    • πŸƒβ€β™‚οΈFundamentals
      • 🎬The ValenceProvider
      • ✍️Using custom fonts
    • 🧱Components
      • πŸ”˜Buttons
        • Button with icon
        • Grid Button
        • Text button
        • Icon button
        • Multi-part button
        • Unstyled button
        • Primitive button
      • ⌨️Inputs
        • Color Picker
        • Text input
        • Text area
        • Number input
        • Select input
        • Switch
        • Slider
        • Range slider
        • Pill selector
        • Input container
        • Dropdown container
      • πŸ–₯️Display
        • Accordion
        • Alert
        • Color Swatch
        • Icon
        • Image
        • Avatar
        • Avatar Group
        • Loader
        • Pill
        • Spoiler
        • Stepper
        • Text
        • Title
      • 🧩Layout
        • App Container
        • Card
        • Flex
          • Flex Center
          • Styled Flex
        • Floating Toolbar
        • Grid
        • Header
        • Overflow Container
        • Space
      • πŸ—ΊοΈNavigation
        • App Nav
      • πŸ”ΌOverlays
        • Modal
        • Tooltip
        • Modal background
        • πŸ“°Sheets
          • Bottom Sheet
          • Dynamic Sheet
          • Side Sheet
    • πŸͺHooks
      • UseColorScheme
      • UseColors
      • UseControlledList
      • UseDetectKeyDown
      • UseDisclosure
      • UseFloating
      • UseTooltip
      • UseBreakpoint
      • UseResponsiveProps
    • 🀚Generics
      • Generic button props
      • Generic input props
      • Generic Sheet Props
  • Valence Plugins
    • 🎠Valence Carousel
      • Carousel Child Props
  • Valence Utils
    • βœ‹Generics
      • Clickable
      • Events
      • Global
      • Grid
      • Layout
      • Overlay
      • Polymorphic
    • πŸ§œβ€β™€οΈPolymorphism
      • Polymorphic Button
      • Polymorphic Layout
      • Polymorphic Text
  • Update Notes
    • 3.0.0
    • 2.7.0
    • 2.6.0
    • 2.5.0
    • 2.4.0
    • 2.3.0
    • 2.2.0
    • 2.1.0
    • 2.0.0
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Valence Plugins
  2. Valence Carousel

Carousel Child Props

Last updated: 2.0.0 (22/01/2024)

PreviousValence CarouselNextGenerics

Last updated 11 months ago

Was this helpful?

All children of the Carousel component must use the CarouselChildProps, or a React error will occur. These props supply information about the state of each child.

isNearest describes whether this child is the nearest to the left edge of the carousel, but is not necessarily the same as the "active" child. isActive, conversely, describes whether this child is focused by the carousel. When the user is moving the carousel (either via scrolling or dragging), both the nearest and active components are likely to be the same; the active component is usually the one that is closest to the left edge.

When scrolling all the way to the right, these two values diverge. The nearest child will always be the element closest to the left edge, however the active child may become one that is further right than the nearest one.

Additionally, the active child is "debounced" such that it does not change as frequently when scrolling.

In short, in almost every situation, you should prefer the use of isActive over isNearest. The latter is included for completeness.

πŸŽ