# carouselParallaxScrollEffect

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier` | `@https://developer.android.com/reference/kotlin/androidx/compose/material3/ExperimentalMaterial3Api @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier.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)( index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html, state: https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? )` Add a parallax effect to an item by clipping and translating the item as it enters and exits a scrollable viewport. | Cmn |

## Functions

### Modifier.carouselParallaxScrollEffect

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:carouselParallaxScrollEffect)

```
@ExperimentalMaterial3Api
@Composable
fun Modifier.carouselParallaxScrollEffect(
    index: Int,
    state: CarouselParallaxScrollEffectState,
    shape: Shape,
    border: BorderStroke? = null
): Modifier
```

Add a parallax effect to an item by clipping and translating the item as it enters and exits a scrollable viewport.

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)` to give any scrollable container the look and feel of a Material uncontained multi-aspect carousel. Unlike dedicated Carousel composables (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalMultiBrowseCarousel.composable#HorizontalMultiBrowseCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.unit.Dp,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)`, `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalCenteredHeroCarousel.composable#HorizontalCenteredHeroCarousel(androidx.compose.material3.carousel.CarouselState,androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.gestures.TargetedFlingBehavior,kotlin.Boolean,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,kotlin.Function2)`) which are based on Pager and require all items to be the same size, this modifier can be used with `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)`, `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)`, `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)`, `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)`, or any custom scrollable where items are able to vary in size.

```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 |
|---|---|
| `index: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html` | the index of the item this modifier is applied to |
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselParallaxScrollEffectState` | the object holding the scrollable container's effect state |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape` | the shape to clip the item and optional border to |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | an optional border to draw around the clipped `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#(androidx.compose.ui.Modifier).carouselParallaxScrollEffect(kotlin.Int,androidx.compose.material3.carousel.CarouselParallaxScrollEffectState,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.BorderStroke)` |