無限 HorizontalPager

// carousel display of components with an image and a title arranged in Columns
@Composable
fun LoopingHorizontalBannerPager(
  modifier: Modifier = Modifier,
  bannerList: List<Banner>,
) {
  val scrollableList = if (bannerList.size > 1) {
    listOf(bannerList.last()) + bannerList + listOf(bannerList.first())
  } else {
    bannerList
  }

  // starts from the middle of the list
  val pagerState = rememberPagerState(initialPage = scrollableList.size / 2)
  HorizontalPager(
    state = pagerState,
    count = scrollableList.size,
    modifier = modifier,
    content = { index ->
      val banner = scrollableList[index]
      Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally
      ) {
        Image(
          painter = painterResource(id = banner.resId),
          contentDescription = "banner image",
          modifier = Modifier
            .fillMaxWidth(),
          contentScale = ContentScale.Crop,
        )
        Text(
          text = banner.title,
          fontSize = 16.sp,
          modifier = Modifier
            .padding(16.dp),
        )
      }
    }
  )
  if (pagerState.currentPage == 0 && !pagerState.isScrollInProgress) {
    LaunchedEffect(Unit) {
      pagerState.scrollToPage(scrollableList.lastIndex - 1)
    }
  }

  if (pagerState.currentPage == scrollableList.lastIndex && !pagerState.isScrollInProgress) {
    LaunchedEffect(Unit) {
      pagerState.scrollToPage(1)
    }
  }
}