---
title: "MultiAspectCarouselScope"
description: "A scope containing all methods used to create a multi-aspect carousel from a
[androidx.compose.foundation.lazy.LazyRow] or [androidx.compose.foundation.lazy.LazyColumn].

For each item in a lazy list, remember a [MultiAspectCarouselItemDrawInfo] using and then modify
items with [maskClip] to create a parallax masking effect as items enter and exit the scrolling
container."
type: "interface"
---

<div class='type'>Interface</div>


<a id='references'></a>

<div class='sourceset sourceset-common'>Common</div>



```kotlin
interface MultiAspectCarouselScope
```


A scope containing all methods used to create a multi-aspect carousel from a
`androidx.compose.foundation.lazy.LazyRow` or `androidx.compose.foundation.lazy.LazyColumn`.

For each item in a lazy list, remember a `MultiAspectCarouselItemDrawInfo` using and then modify
items with `maskClip` to create a parallax masking effect as items enter and exit the scrolling
container.


## Functions

```kotlin
@ExperimentalMaterial3Api
    fun Modifier.maskClip(
        shape: Shape,
        multiAspectItemDrawInfo: MultiAspectCarouselItemDrawInfo,
    ): Modifier
```


Clip and parallax a composable item in a LazyLayout to the given `shape` according to mask
and parallax values from `multiAspectItemDrawInfo`.

#### Parameters

| | |
| --- | --- |
| shape | the shape to be applied to the composable |
| multiAspectItemDrawInfo | The draw info whose details will be used for the shape's bounds in the main axis and the parallax effect |



```kotlin
@ExperimentalMaterial3Api
    @Composable
    fun Modifier.maskBorder(
        border: BorderStroke,
        shape: Shape,
        multiAspectItemDrawInfo: MultiAspectCarouselItemDrawInfo,
    ): Modifier
```


Draw a border on a composable item in a LazyLayout using the given `shape` according to the
mask values from `multiAspectItemDrawInfo`.

Apply `maskBorder` before `maskClip` to avoid clipping the border.

#### Parameters

| | |
| --- | --- |
| border | the border to be drawn around the composable |
| shape | the shape of the border |
| multiAspectItemDrawInfo | the draw info whose details will be used for the shape's bounds in the main axis |




## Code Examples

### MultiAspectCarouselLazyRowSample
```kotlin
@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MultiAspectCarouselLazyRowSample() {
    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,
            ),
        )
    MultiAspectCarouselScope {
        val state = rememberLazyListState()
        LazyRow(
            state = state,
            contentPadding = PaddingValues(16.dp),
            horizontalArrangement = Arrangement.spacedBy(8.dp),
            modifier = Modifier.fillMaxWidth().height(221.dp),
        ) {
            itemsIndexed(items) { i, item ->
                val drawInfo = remember { MultiAspectCarouselItemDrawInfo(i, state) }
                Image(
                    painter = painterResource(id = item.imageResId),
                    contentDescription = stringResource(item.contentDescriptionResId),
                    modifier =
                        Modifier.width(item.mainAxisSize)
                            .height(205.dp)
                            .maskClip(MaterialTheme.shapes.extraLarge, drawInfo),
                    contentScale = ContentScale.Crop,
                )
            }
        }
    }
}
```