How to set the background color of the numeric indicator in Swiper?

Read the original article：How to set the background color of the numeric indicator in Swiper?

Context

When the Swiper's indicator is changed to a numeric indicator, how can the background color of the indicator be modified?

Description

• Swiper is a core component used to implement sliding switch functions, commonly used in scenarios such as carousels, image displays, and multi-page switching. The indicator is used to display the current sliding position.
• Stack is a core component used to implement layered layouts. It allows multiple child components to be stacked in a specified order, often used in UI scenarios that require layered interactions, such as pop-ups, tooltips, and overlay layers.

Solution / Approach

The indicator property of Swiper provides the ability to set the style of the navigation point indicator. The DigitIndicator is the style for numeric indicators, but it does not expose the ability to modify the background color. By using the layering capabilities provided by Stack in combination with the onChange event of the Swiper component, you can listen to the current page number to customize the indicator. A complete example is as follows:

@Entry
@Component
struct Page {
  @State swiperData: number[] = [1, 2, 3, 4, 5];
  @State curIndex: number = 1

  build() {
    Stack() {
      Swiper() {
        ForEach(this.swiperData, (item: number) => {
          Column() {
            Text(item.toString())
          }
          .width('100%')
          .backgroundColor(Color.Pink)
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.Center)
        })
      }
      .onChange((index: number) => {
        this.curIndex = index + 1
      })
      .padding(10)
      .indicator(false)
      .width('100%')
      .height(300)

      Row() {
        Text(this.curIndex.toString())
          .fontColor(Color.White)
        Text('/')
          .fontColor(Color.White)
        Text(this.swiperData.length.toString())
          .fontColor(Color.White)
      }
      .padding({
        left: 6,
        right: 6,
        top: 4,
        bottom: 4
      })
      .backgroundColor(Color.Gray)
      .offset({ left: 160, top: 120 })
    }
  }
}

Here you can find the related screenshot below;

Key Takeaways

• DigitIndicator customization limitation: The built-in DigitIndicator of the Swiper component does not provide an API to change the background color directly.
• Use Stack for overlay UI: By wrapping the Swiper inside a Stack component, you can layer a custom indicator UI above the Swiper content.
• Track current page with onChange: The Swiper.onChange() event allows you to listen to page changes and update a state variable (e.g., curIndex) that represents the current slide index.
• Disable the default indicator: Setting .indicator(false) hides the default indicator so that a fully custom numeric indicator can be implemented.
• Build a custom indicator: Use components like Row + Text to display a format such as currentIndex / totalSlides, and style it freely (background color, padding, font color, etc.).
• Full styling control: Because the indicator is a normal ArkUI layout element, you can control background color, position, padding, opacity, and shape, which is not possible with the default DigitIndicator.

Written by Mehmet Algul