SushiHorizontalPager

SushiHorizontalPager allow users to swipe between pages of content. It provides a way to create carousels, image galleries, onboarding flows, or any UI that requires paging through content, and enables horizontal swiping.

Example

SushiHorizontalPager

// First, create a PagerState that manages the paging behavior
val pagerState = rememberPagerState(pageCount = { 5 }) // 5 pages

// Create the pager with default settings
SushiHorizontalPager(
    state = pagerState,
    modifier = Modifier
        .fillMaxWidth()
        .height(200.dp)
) { page ->
    // Content for each page
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        SushiText(
            props = SushiTextProps(
                text = "Page ${page + 1}",
                type = SushiTextType.Bold700
            )
        )
    }
}

// Create a pager with custom styling and behavior
SushiHorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 32.dp), // Padding on sides
    pageSpacing = 16.dp, // Space between pages
    pageSize = PageSize.Fixed(180.dp), // Fixed page width
    beyondViewportPageCount = 2, // Keep 2 offscreen pages loaded
    userScrollEnabled = true // Allow user scrolling
) { page ->
    // Page content goes here
}

Programmatic Navigation

val scope = rememberCoroutineScope()
val pagerState = rememberPagerState(pageCount = { 5 })

// Navigate to a specific page with animation
SushiButton(
    props = SushiButtonProps(text = "Next Page"),
    onClick = {
        scope.launch {
            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
            pagerState.animateScrollToPage(nextPage)
        }
    }
)

Auto-Scrolling Carousel

// Auto-scroll effect
var autoScrollEnabled by remember { mutableStateOf(true) }
val pagerState = rememberPagerState(pageCount = { items.size })

LaunchedEffect(autoScrollEnabled) {
    if (autoScrollEnabled) {
        while(true) {
            delay(3000) // Scroll every 3 seconds
            val nextPage = (pagerState.currentPage + 1) % pagerState.pageCount
            pagerState.animateScrollToPage(nextPage)
        }
    }
}

// The pager
SushiHorizontalPager(
    state = pagerState,
    // other properties
) { page ->
    // Page content
}

Using with Page Indicators

Box(modifier = Modifier.fillMaxWidth()) {
    // The pager
    SushiHorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxWidth()
            .height(200.dp)
    ) { page ->
        // Page content
    }

    // Page indicators at the bottom
    Box(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .padding(16.dp)
    ) {
        SushiIndicator(
            dotCount = pagerState.pageCount,
            type = SushiIndicatorType.Balloon(
                dotsGraphic = DotGraphic(
                    color = Color.White,
                    size = 8.dp
                )
            ),
            pagerState = pagerState
        )
    }
}

Component API

SushiHorizontalPager Parameters

Both components share most parameters, with slight differences due to orientation:

Parameter	Description
state	The state object to control and observe the pager's state
modifier	The modifier to be applied to the pager
contentPadding	Padding to be applied to the pager content
pageSize	Strategy defining how pages should be sized
beyondViewportPageCount	The number of pages to keep loaded beyond the visible viewport
pageSpacing	Spacing between each page
flingBehavior	The fling behavior that defines how the pager should handle fling gestures
userScrollEnabled	Whether user scrolling is enabled
reverseLayout	Whether the layout should be reversed
key	Optional lambda to provide a unique key for each page
pageNestedScrollConnection	Nested scroll connection to be applied to each page
snapPosition	Position to which the pages should snap
verticalAlignment	Vertical alignment of each page within the pager