How do we set the width of page in HorizontalPager in jetpack compose?

Question

I'm using HorizontalPager in jetpack compose. I want to set the page height to available screen and page width should be 70% of the width. I tried setting .fillMaxWidth(0.7f) to horizontalPager its setting the width of whole Horizontal pager but i want to set the width of page.

I want the result like this

I tired this code

     HorizontalPager(
        state = pagerState,
        pageSize = PageSize.Fill,
        contentPadding = contentPaddingValues
    ) { page ->
        val media = mediaList[page]
        Card(
            modifier = Modifier
                .fillMaxSize()
                .graphicsLayer {
                    val pageOffSet = (
                            (pagerState.currentPage - page) + pagerState
                                .currentPageOffsetFraction
                            ).absoluteValue
                    alpha = lerp(
                        start = 0.5f,
                        stop = 1f,
                        fraction = 1f - pageOffSet.coerceIn(0f, 1f)
                    )
                }
        ) {
                AsyncImage(
                    modifier = Modifier
                        .fillMaxSize(),
                    contentScale = ContentScale.Crop,
                    model = ImageRequest.Builder(context)
                    .data(media.uri)
                    .crossfade(true)
                    .build(),
                    contentDescription = null )
        }
    }

But unfortunatliy i m getting this result :

Answer 1

I was also facing like you. I tried with some graphic layer changes and finally I've got the result.
Please try this one;

val pageOffset = pagerState.currentPage - currentPage + pagerState.currentPageOffsetFraction
Card(
    modifier = modifier
        .graphicsLayer {


            alpha = lerp(
                start = 0.7f,
                stop = 1f,
                fraction = 1f - pageOffset.absoluteValue.coerceIn(0f, 1f),
            )

            cameraDistance = 8 * density
            rotationY = lerp(
                start = 0f,
                stop = 0f,
                fraction = pageOffset.coerceIn(-1f, 1f),
            )

            lerp(
                start = 0.8f,
                stop = 1f,
                fraction = 1f - pageOffset.absoluteValue.coerceIn(0f, 1f),
            ).also { scale ->
                scaleX = scale
                scaleY = scale
            }
        },

    content = {
        AsyncImage(
            model = "https://sample-image",
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
    }
)