ループ再生機能の実装

Swiperコンポーネントで無限ループを実現するには、continuousプロパティを有効化します。

@Entry
@Component
struct CarouselExample {
  private carouselController: CarouselController = new CarouselController()
  
  build() {
    Swiper(this.carouselController) {
      Text("A")
        .size('100%')
        .bgColor(Color.PaleTurquoise)
        .textAlign(TextAlign.Center)
        .fontSize(32)
      
      Text("B")
        .size('100%')
        .bgColor(Color.Thistle)
        .textAlign(TextAlign.Center)
        .fontSize(32)
      
      Text("C")
        .size('100%')
        .bgColor(Color.MistyRose)
        .textAlign(TextAlign.Center)
        .fontSize(32)
    }
    .continuous(true)
  }
}

この設定により、最初/最後のスライドでも前後への移動が可能になります。無効化する場合はcontinuous(false)を指定します。

自動切り替えの実装

自動スライドショーを実装するには、autoSlideとintervalプロパティを組み合わせます。

@Entry
@Component
struct AutoCarousel {
  private controller: CarouselController = new CarouselController()
  
  build() {
    Swiper(this.controller) {
      // 3つのスライド要素
      Text("Slide 1").bgColor('#E0F7FA')
      Text("Slide 2").bgColor('#F3E5F5')
      Text("Slide 3").bgColor('#FFF8E1')
    }
    .continuous(true)
    .autoSlide(true)
    .interval(2500) // 2.5秒間隔
  }
}

インターバルのデフォルト値は2000msですが、必要に応じて調整可能です。

インジケータのカスタマイズ

ナビゲーションドットの外観をindicatorConfigで詳細設定できます。

Swiper(this.controller) {
  // スライド内容
}
.indicatorConfig({
  dotSize: 24,
  horizontalMargin: 30,
  normalColor: Color.Grey,
  selectedColor: Color.Cyan
})

位置調整や色の指定に加え、選択時と通常時の色を別々に設定可能です。

操作方法の実装パターン

スライド移動は3つの方法で実装可能です：

1. タッチジェスチャーによるスワイプ
2. インジケータのタップ
3. コントローラーメソッドの呼び出し

Column() {
  Swiper(this.controller) {
    // スライド要素
  }
  .indicator(true)
  
  Row() {
    Button("← 前へ")
      .onClick(() => this.controller.prevSlide())
    
    Button("次へ →")
      .onClick(() => this.controller.nextSlide())
  }
  .justifyContent(FlexAlign.SpaceAround)
}

縦横方向の切り替え

verticalScrollプロパティでスクロール方向を制御します。

// 水平スクロール（デフォルト）
Swiper(this.controller) { /* ... */ }
.verticalScroll(false)

// 垂直スクロール
Swiper(this.controller) { /* ... */ }
.verticalScroll(true)

縦方向にコンテンツを表示する場合はtrueを指定します。