# androidx.compose.material3.carousel

Common/All

## Interfaces

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselItemDrawInfo` | Interface to hold information about a Carousel item and its size. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselItemScope` | Receiver scope for `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#Carousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.foundation.gestures.Orientation,kotlin.Function2,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Function2)` item content. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState` | A state holder for scrollable items to track effect values that are applied by the `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/carouselParallaxScrollEffect.composable#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)` modifier. | Cmn |

## Classes

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectItemInfo` | Visual effect values calculated for an item at a specific index in a scrollable container. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselState` | The state that can be used to control all types of carousels. | Cmn |

## Objects

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselDefaults` | Contains the default values used by `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#Carousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.foundation.gestures.Orientation,kotlin.Function2,androidx.compose.foundation.layout.PaddingValues,kotlin.Int,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,kotlin.Function2)`. | Cmn |

## Composables

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalCenteredHeroCarousel.composable` | [Material Design center-aligned hero carousel](https://m3.material.io/components/carousel/specs) | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalMultiBrowseCarousel.composable` | [Material Design multi-browse carousel](https://m3.material.io/components/carousel/specs) | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalUncontainedCarousel.composable` | [Material Design uncontained carousel](https://m3.material.io/components/carousel/specs) | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/carouselParallaxScrollEffect.composable` | Add a parallax effect to an item by clipping and translating the item as it enters and exits a scrollable viewport. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/rememberCarouselState.composable` | Creates a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselState` that is remembered across compositions. | Cmn |

## Top-level functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api @https://developer.android.com/reference/kotlin/androidx/compose/runtime/annotation/RememberInComposition https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.grid.LazyGridState)(state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridState)` Create a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.grid.LazyGridState)` object for a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyHorizontalGrid.composable#LazyHorizontalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyVerticalGrid.composable#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`. | Cmn |
| `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api @https://developer.android.com/reference/kotlin/androidx/compose/runtime/annotation/RememberInComposition https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.LazyListState)(state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState)` Create a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.LazyListState)` object for a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyRow.composable#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`. | Cmn |

## Top-level functions

### CarouselParallaxScrollEffectState

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/carousel/CarouselParallaxScrollEffect.kt+function:CarouselParallaxScrollEffectState)

```
@ExperimentalMaterial3Api
@RememberInComposition
fun CarouselParallaxScrollEffectState(state: LazyGridState): CarouselParallaxScrollEffectState
```

Create a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.grid.LazyGridState)` object for a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyHorizontalGrid.composable#LazyHorizontalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyVerticalGrid.composable#LazyVerticalGrid(androidx.compose.foundation.lazy.grid.GridCells,androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.grid.LazyGridState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`.

Remember a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.grid.LazyGridState)` for the LazyGrid and use `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/carouselParallaxScrollEffect.composable#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)` on each item's container that should be clipped and translated to create the effect.

```kotlin
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.carousel.CarouselParallaxScrollEffectState
import androidx.compose.material3.carousel.carouselParallaxScrollEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

data class CarouselItem(
    val id: Int,
    @DrawableRes val imageResId: Int,
    @StringRes val contentDescriptionResId: Int,
    val mainAxisSize: Dp,
)

val items =
    listOf(
        CarouselItem(
            0,
            R.drawable.carousel_image_1,
            R.string.carousel_image_1_description,
            305.dp,
        ),
        CarouselItem(
            1,
            R.drawable.carousel_image_2,
            R.string.carousel_image_2_description,
            205.dp,
        ),
        CarouselItem(
            2,
            R.drawable.carousel_image_3,
            R.string.carousel_image_3_description,
            275.dp,
        ),
        CarouselItem(
            3,
            R.drawable.carousel_image_4,
            R.string.carousel_image_4_description,
            350.dp,
        ),
        CarouselItem(
            4,
            R.drawable.carousel_image_5,
            R.string.carousel_image_5_description,
            100.dp,
        ),
    )

val state = rememberLazyListState()
val effectState = remember(state) { CarouselParallaxScrollEffectState(state) }
LazyRow(
    state = state,
    contentPadding = PaddingValues(16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    modifier = Modifier.fillMaxWidth().height(221.dp),
) {
    itemsIndexed(items) { i, item ->
        Image(
            painter = painterResource(id = item.imageResId),
            contentDescription = stringResource(item.contentDescriptionResId),
            modifier =
                Modifier.width(item.mainAxisSize)
                    .height(205.dp)
                    .carouselParallaxScrollEffect(
                        i,
                        effectState,
                        MaterialTheme.shapes.extraLarge,
                    ),
            contentScale = ContentScale.Crop,
        )
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridState` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/grid/LazyGridState` for the grid |

### CarouselParallaxScrollEffectState

Cmn Artifact: [androidx.compose.material3:material3](https://developer.android.com/jetpack/androidx/releases/compose-material3) [View Source](https://cs.android.com/search?q=file:androidx/compose/material3/carousel/CarouselParallaxScrollEffect.kt+function:CarouselParallaxScrollEffectState)

```
@ExperimentalMaterial3Api
@RememberInComposition
fun CarouselParallaxScrollEffectState(state: LazyListState): CarouselParallaxScrollEffectState
```

Create a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.LazyListState)` object for a `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyRow.composable#LazyRow(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyColumn.composable#LazyColumn(androidx.compose.ui.Modifier,androidx.compose.foundation.lazy.LazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.compose.foundation.OverscrollEffect,androidx.compose.foundation.lazy.layout.LazyLayoutCacheWindow,kotlin.Function1)`.

Remember a `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#CarouselParallaxScrollEffectState(androidx.compose.foundation.lazy.LazyListState)` for the LazyList and use `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/carouselParallaxScrollEffect.composable#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)` on each item's container that should be clipped and translated to create the effect.

```kotlin
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.carousel.CarouselParallaxScrollEffectState
import androidx.compose.material3.carousel.carouselParallaxScrollEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

data class CarouselItem(
    val id: Int,
    @DrawableRes val imageResId: Int,
    @StringRes val contentDescriptionResId: Int,
    val mainAxisSize: Dp,
)

val items =
    listOf(
        CarouselItem(
            0,
            R.drawable.carousel_image_1,
            R.string.carousel_image_1_description,
            305.dp,
        ),
        CarouselItem(
            1,
            R.drawable.carousel_image_2,
            R.string.carousel_image_2_description,
            205.dp,
        ),
        CarouselItem(
            2,
            R.drawable.carousel_image_3,
            R.string.carousel_image_3_description,
            275.dp,
        ),
        CarouselItem(
            3,
            R.drawable.carousel_image_4,
            R.string.carousel_image_4_description,
            350.dp,
        ),
        CarouselItem(
            4,
            R.drawable.carousel_image_5,
            R.string.carousel_image_5_description,
            100.dp,
        ),
    )

val state = rememberLazyListState()
val effectState = remember(state) { CarouselParallaxScrollEffectState(state) }
LazyRow(
    state = state,
    contentPadding = PaddingValues(16.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp),
    modifier = Modifier.fillMaxWidth().height(221.dp),
) {
    itemsIndexed(items) { i, item ->
        Image(
            painter = painterResource(id = item.imageResId),
            contentDescription = stringResource(item.contentDescriptionResId),
            modifier =
                Modifier.width(item.mainAxisSize)
                    .height(205.dp)
                    .carouselParallaxScrollEffect(
                        i,
                        effectState,
                        MaterialTheme.shapes.extraLarge,
                    ),
            contentScale = ContentScale.Crop,
        )
    }
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState` | the `https://developer.android.com/reference/kotlin/androidx/compose/foundation/lazy/LazyListState` of the list |