<div class="banner-wrapper">
  <swiper-container #swiperContainer init="false">
    @for (slide of slides; track $index) {
      <swiper-slide>
        <div class="slide-content" 
             [style.background]="slide.bgColor">
          <div class="text-container">
            <h2 class="title">{{ slide.title }}</h2>
            <h3 class="subtitle">{{ slide.subtitle }}</h3>
            <p class="description">{{ slide.description }}</p>
            <button class="cta-button">立即探索</button>
          </div>
        </div>
      </swiper-slide>
    }

    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
  </swiper-container>
</div>