Objective: To achieve a carousel with automatic loop switching every 4 seconds, with a long horizontal line as the indicator.

Prerequisite: ohos.permission.INTERNET Permission application required

Implementation idea:

  1. Implement slideshow through Swiper.
  2. Implement automatic playback through autoPlay and interval.
  3. Set indicator styles through indicators.

The Swiper component provides the ability to display scrolling displays. Swiper itself is a container component, and when multiple sub components are set, they can be rotated and displayed. Usually, when displaying recommended content on the homepage of some applications, the ability of carousel display is required.

Loop Playback
Control whether to loop playback through the loop attribute, which defaults to true.
When loop is true, when displaying the first or last page, you can continue to switch forward to the previous page or backward to the next page. If loop is false, the page cannot continue to switch forward or backward on the first or last page.

Automatic carousel
Swiper controls whether to automatically rotate sub components by setting the autoPlay property. The default value for this attribute is false.
When autoPlay is set to true, it will automatically switch to play sub components, and the playback interval between sub components is set through the interval property. The default value for the interval property is 3000, measured in milliseconds.

Navigation point style
Swiper provides default navigation point styles and navigation point arrow styles. Navigation points are displayed in the center position below Swiper by default. Developers can also customize the position and style of navigation points through indicator properties, and navigation point arrows are not displayed by default.
Through the indicator property, developers can set the position of navigation points relative to the four directions of the Swiper component, including up, down, left, right, and also set the size, color, mask, and color of each selected navigation point.

Optional navigation point indicator styles.

  • DotIndicator: A style of dot indicator.
  • DigitIndicator: Digital indicator style.
  • Boolean: Enable navigation point indicator. Set to true to enable, false not to enable. Default value: true Default type: DotIndicator

Rotation direction
Swiper supports horizontal and vertical rotation, mainly controlled by the vertical attribute.
When vertical is true, it means to rotate in the vertical direction; When false, it indicates that the broadcast is being rotated horizontally. The default value for vertical is false.

actual combat

@Entry
@Component
struct SwiperDemoPage {
  imgs: ImageObj[] = [
    {
      src: 'https://c-ssl.dtstatic.com/uploads/blog/202311/27/0GSZv1oh0ePwpE.thumb.400_0.jpeg',
      title: '轮播图1',
    },
    {
      src: 'https://c-ssl.dtstatic.com/uploads/blog/202311/27/3BSm7JWFzV7Pqm.thumb.400_0.jpeg',
      title: '轮播图2',
    },
    {
      src: 'https://c-ssl.dtstatic.com/uploads/blog/202311/27/4ESaevWhoEyXqY.thumb.400_0.jpeg',
      title: '轮播图3',
    },
  ]
  private isLoop: boolean = false

  build() {
    Column({ space: 10 }) {
      Text('Swiper轮播图实战')
      this.buildSwiper()
    }
    .height('100%')
    .width('100%')
  }

  /**
   * 轮播图UI
   */
  @Builder
  buildSwiper() {
    Column() {
      Swiper() {
        ForEach(this.imgs, (item: ImageObj) => {
          Stack({ alignContent: Alignment.Bottom }) {
            Image(item.src)
              .width(Percent.P100)
              .height(Percent.P100)
            Row() {
              Text(item.title)
                .maxLines(2)
                .textOverflow({ overflow: TextOverflow.Ellipsis })
                .wordBreak(WordBreak.BREAK_ALL)
                .margin({ left: 8, right: 8, bottom: 26 })
                .fontColor(Color.White)
            }
            .width(Percent.P100)
          }
          .width(Percent.P100)
          .height(Percent.P100)
        })
      }
      .width(Percent.P100)
      .height(Percent.P100)
      .loop(this.isLoop)
      .effectMode(EdgeEffect.None) //设置边缘滑动效果
      .autoPlay(true)
      .interval(4000)
      .indicator(
        // 设置导航点样式
        new DotIndicator()
          .itemWidth(12)
          .itemHeight(2)
          .selectedItemWidth(24)
          .selectedItemHeight(2)
          .color(Color.Gray)
          .selectedColor(Color.White)
      )
    }
    .width(Percent.P100)
    .backgroundColor(Color.White)
    .aspectRatio(9 / 16)
    .borderRadius(6)
    .clip(true)
    .margin(10)
  }
}

interface ImageObj {
  src: string
  title: string
}

enum Percent {
  P100 = '100%'
}