Hi, Everyone Please let me know what`s wrong with this code, Please check the attached video. I have three different textx on all pages.

You should be using an

it

param in

HorizontalPager

content lambda instead of referring to the

currentPage

HorizontalPager(...) {
   when (it) { ... }
}

Or name it:

HorizontalPager(...) { page ->
   when (page) { ... }
}

But please edit your post and move the code and video to the thread comments.

Code:

HorizontalPager(
    count = 3, state = pagerState,
    modifier = Modifier.fillMaxSize()) {
    when (currentPage) {
        0 -> PageItem(
            "Explore the Earth With Us!",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
                    "eiusmod tempor didunt ut labore et dolor evenaim."
        )
        1 -> PageItem(
            title = "Fast and Easy Booking Process",
            subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
                    "eiusmod tempor didunt ut labore et dolor evenaim."
        )
        2 -> PageItem(
            title = "Secure Payments and Easy Refunds!",
            subTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " +
                    "eiusmod tempor didunt ut labore et dolor evenaim."
        )
    }
}

@OptIn(ExperimentalUnitApi::class)
@Composable
fun PageItem(title: String, subTitle: String) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        Text(
            text = title,
            style = semiBoldTextStyle.copy(
                fontSize = TextUnit(20f, TextUnitType.Sp)
            ),
            modifier = Modifier.padding(horizontal = 50.dp),
            textAlign = TextAlign.Center
        )

        Text(
            text = subTitle,
            modifier = Modifier.padding(horizontal = 27.5.dp),
            style = lightTextStyle,
            textAlign = TextAlign.Center
        )
    }
}

HorizontalPager

uses this lambda to render each of your page and it passes the page number to differentiate between them. This lambda is called when the page is about to get visible, but instead you are referring to the

currentPage

(current visible page) to create a content of the requested page. For example you are on the first page and slides your finger to see the second page, but to render the second screen you are using a property which refers to the current screen (which is the first one).