A horizontal carousel that displays its items with the given size except for one item at the end that is cut off.
HorizontalUncontainedCarouselSample
@Preview
@Composable
fun HorizontalUncontainedCarouselSample() {
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,
)
}
}