# HorizontalUncontainedCarousel

Common/All

## Functions summary

|---|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/HorizontalUncontainedCarousel.composable#HorizontalUncontainedCarousel(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.foundation.layout.PaddingValues,kotlin.Function2)( state: https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselState, itemWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, itemSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TargetedFlingBehavior, userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselItemScope.(itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` [Material Design uncontained carousel](https://m3.material.io/components/carousel/specs) | Cmn |

## Functions

### HorizontalUncontainedCarousel

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/Carousel.kt+function:HorizontalUncontainedCarousel)

```
@Composable
fun HorizontalUncontainedCarousel(
    state: CarouselState,
    itemWidth: Dp,
    modifier: Modifier = Modifier,
    itemSpacing: Dp = CarouselDefaults.ItemSpacing,
    flingBehavior: TargetedFlingBehavior = CarouselDefaults.noSnapFlingBehavior(),
    userScrollEnabled: Boolean = true,
    contentPadding: PaddingValues = CarouselDefaults.ContentPadding,
    content: @Composable CarouselItemScope.(itemIndex: Int) -> Unit
): Unit
```

[Material Design uncontained carousel](https://m3.material.io/components/carousel/specs)

A horizontal carousel that displays its items with the given size except for one item at the end that is cut off.

Note that the item size will be bound by the size of the carousel. Otherwise, this carousel lays out as many items as it can in the given size, and changes the size of the last cut off item such that there is a range of motion when items scroll off the edge.

For more information, see [design guidelines](https://m3.material.io/components/carousel/overview)

Example of an uncontained carousel:

```kotlin
import androidx.annotation.DrawableRes
import androidx.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.filled.Image
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.carousel.HorizontalUncontainedCarousel
import androidx.compose.material3.carousel.rememberCarouselState
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp

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

val items =
    listOf(
        CarouselItem(0, R.drawable.carousel_image_1, R.string.carousel_image_1_description),
        CarouselItem(1, R.drawable.carousel_image_2, R.string.carousel_image_2_description),
        CarouselItem(2, R.drawable.carousel_image_3, R.string.carousel_image_3_description),
        CarouselItem(3, R.drawable.carousel_image_4, R.string.carousel_image_4_description),
        CarouselItem(4, R.drawable.carousel_image_5, R.string.carousel_image_5_description),
    )
HorizontalUncontainedCarousel(
    state = rememberCarouselState { items.count() },
    modifier = Modifier.width(412.dp).height(221.dp),
    itemWidth = 186.dp,
    itemSpacing = 8.dp,
    contentPadding = PaddingValues(horizontal = 16.dp),
) { i ->
    val item = items[i]
    Image(
        modifier = Modifier.height(205.dp).maskClip(MaterialTheme.shapes.extraLarge),
        painter = painterResource(id = item.imageResId),
        contentDescription = stringResource(item.contentDescriptionResId),
        contentScale = ContentScale.Crop,
    )
}
```

| Parameters |
|---|---|
| `state: https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselState` | The state object to be used to control the carousel's state |
| `itemWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp` | The width of items in the carousel |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | A modifier instance to be applied to this carousel container |
| `itemSpacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = CarouselDefaults.ItemSpacing` | The amount of space used to separate items in the carousel |
| `flingBehavior: https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TargetedFlingBehavior = CarouselDefaults.noSnapFlingBehavior()` | The `https://developer.android.com/reference/kotlin/androidx/compose/foundation/gestures/TargetedFlingBehavior` to be used for post scroll gestures |
| `userScrollEnabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | whether the scrolling via the user gestures or accessibility actions is allowed. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CarouselDefaults.ContentPadding` | a padding around the whole content. This will add padding for the content after it has been clipped. You can use it to add a padding before the first item or after the last one. Use `https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/package-summary#HorizontalUncontainedCarousel(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.foundation.layout.PaddingValues,kotlin.Function2)` to add spacing between the items. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/material3/carousel/CarouselItemScope.(itemIndex: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-int/index.html) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The carousel's content Composable |