Create carousel

Optimizing Complex Page Scenarios with Swiper Component

Preloading Mechanism

For complex page scenarios, the preloading mechanism of the Swiper component can be utilized. This mechanism leverages idle time on the main thread to construct and layout the components in advance, thereby optimizing the swiping experience.

Layout and Constraints

Swiper acts as a container component. If its size attributes are set, these dimensions will be effective during the carousel display process. If the size attributes are not set, there are two scenarios:

• If the prevMargin or nextMargin attributes are set, the Swiper component's size will follow its parent component.
• If neither prevMargin nor nextMargin is set, the Swiper component will automatically adjust its size based on the size of its child components.

Loop Playback

The loop attribute controls whether the carousel loops. The default value is true.

• When loop is true, you can continue to switch to the previous or next page when displaying the first or last page.
• When loop is false, you cannot switch further when you are on the first or last page.

Example with loop set to true:

Swiper() {
  Text('0')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('1')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('2')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.loop(true)

Example with loop set to false:

Swiper() {
  // ...
}
.loop(false)

Auto Playback

The autoPlay attribute controls whether the Swiper automatically plays its child components. The default value is false.

• When autoPlay is true, the Swiper will automatically switch between child components. The interval between the playback of child components can be set using the interval attribute, which defaults to 3000 milliseconds.

Example with autoPlay set to true and interval set to 1000 milliseconds:

Swiper() {
  // ...
}
.loop(true)
.autoPlay(true)
.interval(1000)

Navigation Point Style

Swiper provides default navigation point styles and arrow styles. By default, navigation points are displayed centered below the Swiper component. Developers can customize the position and style of the navigation points using the indicator attribute. Navigation point arrows are not displayed by default.

Using the indicator attribute, developers can set the position of the navigation points relative to the Swiper component's top, bottom, left, and right sides. They can also customize the size, color, overlay, and selected color of each navigation point.

Example with Default Navigation Point Style:

Swiper() {
  Text('0')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('1')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text('2')
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Pink)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}

Example with Customized Navigation Point Style:

• Set the navigation point diameter to 30vp.
• Set the left margin to 0.
• Set the navigation point color to red.

Swiper() {
  // ...
}
.indicator(
  Indicator.dot()
    .left(0)
    .itemWidth(15)
    .itemHeight(15)
    .selectedItemWidth(30)
    .selectedItemHeight(15)
    .color(Color.Red)
    .selectedColor(Color.Blue)
)