---
title: "HorizontalPager"
description: "A horizontally scrolling Pager optimized for Wear OS devices. This component wraps the standard
Compose Foundation [HorizontalPager] and provides Wear-specific enhancements to improve
performance, usability, and adherence to Wear OS design guidelines.

Please refer to the samples to learn how to use this API."
type: "composable"
---

<div class='type'>Composable Function</div>


<a id='references'></a>

<div class='sourceset sourceset-android'>Android</div>


```kotlin
@Composable
public fun HorizontalPager(
    state: PagerState,
    modifier: Modifier = Modifier,
    contentPadding: PaddingValues = PaddingValues(0.dp),
    beyondViewportPageCount: Int = PagerDefaults.BeyondViewportPageCount,
    flingBehavior: TargetedFlingBehavior = PagerDefaults.snapFlingBehavior(state = state),
    userScrollEnabled: Boolean = true,
    gestureInclusion: GestureInclusion = PagerDefaults.gestureInclusion(state),
    reverseLayout: Boolean = false,
    key: ((index: Int) -> Any)? = null,
    rotaryScrollableBehavior: RotaryScrollableBehavior? = null,
    content: @Composable PagerScope.(page: Int) -> Unit,
)
```


A horizontally scrolling Pager optimized for Wear OS devices. This component wraps the standard
Compose Foundation `HorizontalPager` and provides Wear-specific enhancements to improve
performance, usability, and adherence to Wear OS design guidelines.

Please refer to the samples to learn how to use this API.

#### Parameters

| | |
| --- | --- |
| state | The state to control this pager |
| modifier | A modifier instance to be applied to this Pager outer layout |
| contentPadding | a padding around the whole content. This will add padding for the content after it has been clipped, which is not possible via `modifier` param. You can use it to add a padding before the first page or after the last one. |
| beyondViewportPageCount | Pages to compose and layout before and after the list of visible pages. Note: Be aware that using a large value for `beyondViewportPageCount` will cause a lot of pages to be composed, measured and placed which will defeat the purpose of using lazy loading. This should be used as an optimization to pre-load a couple of pages before and after the visible ones. This does not include the pages automatically composed and laid out by the pre-fetcher in the direction of the scroll during scroll events. |
| flingBehavior | The `TargetedFlingBehavior` to be used for post scroll gestures. |
| userScrollEnabled | whether the scrolling via the user gestures or accessibility actions is allowed. You can still scroll programmatically using `PagerState.scroll` even when it is disabled. |
| gestureInclusion | When userScrollEnabled=true, this function provides more fine-grained control so that touch gestures can be excluded when they start in a certain region. An instance of `GestureInclusion` can be passed in here which will determine via `GestureInclusion.ignoreGestureStart` whether the gesture should proceed or not. By default, `gestureInclusion` allows gestures everywhere except a zone on the left edge of the first page, which is used for swipe-to-dismiss (see `PagerDefaults.gestureInclusion`). |
| reverseLayout | reverse the direction of scrolling and layout. |
| key | a stable and unique key representing the item. When you specify the key the scroll position will be maintained based on the key, which means if you add/remove items before the current visible item the item with the given key will be kept as the first visible one. If null is passed the position in the list will represent the key. |
| rotaryScrollableBehavior | Parameter for changing rotary behavior. By default rotary support is disabled for `HorizontalPager`. It can be enabled by passing `RotaryScrollableDefaults.snapBehavior` with pagerState parameter. |
| content | A composable function that defines the content of each page displayed by the Pager. This is where the UI elements that should appear within each page should be placed. |





## Code Examples
### SimpleHorizontalPagerSample
```kotlin
@Composable
fun SimpleHorizontalPagerSample() {
    // Creates a horizontal pager with 10 elements
    val state = rememberPagerState { 10 }
    HorizontalPager(modifier = Modifier.fillMaxSize(), state = state) { page ->
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            BasicText(text = "Page $page", style = TextStyle(color = Color.White))
        }
    }
}
```