Sync Two HorizontalPager

Question

I want to active sync between two horizontal pager it should swipe same time and same amount of swipe in both pager

val pagerState = rememberPagerState()
val pagerStateTop = rememberPagerState()
val pages = arrayListOf<Int>(1, 2, 3, 4, 5, 6, 7)
Column(modifier = Modifier.fillMaxSize()) {
    HorizontalPager(
        modifier = Modifier.fillMaxWidth(),
        pageCount = pages.size,
        state = pagerStateTop,
    ) { page ->
        Image(
            modifier = Modifier.fillMaxWidth().absolutePadding(10.dp,20.dp,10.dp,20.dp),
            contentDescription = ",",
            painter = painterResource(id = androidx.core.R.drawable.ic_call_answer)
        )
    }

    HorizontalPager(
        modifier = Modifier.fillMaxSize(),
        pageCount = pages.size,
        state = pagerState,
    ) { page ->
        Text(
            modifier = Modifier.fillMaxSize(),
            textAlign = TextAlign.Center,
            text = "Content DATA"
        )
    }
}

Answer 1

LaunchedEffect(pagerState) {
    snapshotFlow { pagerState.currentPageOffsetFraction }.collect {
        pagerStateTop.scrollToPage(pagerState.currentPage, pagerState.currentPageOffsetFraction)
    }
}