CardCarousel

fun CardCarousel(modifier: Modifier = Modifier, cardInfos: List<CardInfo>, initialCardInfo: CardInfo? = null, allowReordering: Boolean = true, onCardClicked: (CardInfo) -> Unit = {}, onCardFocused: (CardInfo) -> Unit = {}, onCardReordered: (cardInfo: CardInfo, oldIndex: Int, newIndex: Int) -> Unit = { _, _, _ -> }, selectedCardInfo: @Composable (cardInfo: CardInfo?, index: Int, total: Int) -> Unit = { _, _, _ -> }, emptyCardContent: @Composable () -> Unit = { })

A horizontal carousel composable that displays a collection of cards.

CardCarousel provides a highly interactive way to browse, select, and reorder cards. It features a "cover flow" style layout where the center item is elevated, and side items are scaled down.

Features

  • Snap Scrolling: Automatically snaps to the nearest card after dragging.

  • Reordering: Long-press and drag to reorder items (optional).

  • Focus Reporting: Reports which card is currently centered.

  • Custom Overlays: Supports custom views for selected item information and empty states.

Parameters

modifier
cardInfos

the cards to show in the carousel.

initialCardInfo

the card to initially select.

allowReordering

if true allow the user to reorder cards by long pressing.

onCardClicked

action to perform when a card is tapped.

onCardFocused

called when a new card is focused.

onCardReordered

called when the user has reordered a card.

selectedCardInfo

a composable to draw text underneath the focused card.

emptyCardContent

a composable to draw text when there are no cards. This will be rendered in the center of a dashed outline of a grey card .