如何在divs Angular 2中创建简单的分页/轮播

<div class="carousel-container">
  <!-- 轮播内容 -->
</div>

.carousel-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

carouselItems: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

<div class="carousel-container">
  <div class="carousel-item" *ngFor="let item of carouselItems">{{ item }}</div>
</div>

.carousel-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'app-pagination-carousel',
  templateUrl: './pagination-carousel.component.html',
  styleUrls: ['./pagination-carousel.component.css']
})
export class PaginationCarouselComponent implements AfterViewInit {
  @ViewChild('carouselContainer') carouselContainer: ElementRef;

  carouselItems: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];

  ngAfterViewInit(): void {
    const container = this.carouselContainer.nativeElement;
    const items = container.getElementsByClassName('carousel-item');
    let currentIndex = 0;

    // 显示第一个轮播项
    items[currentIndex].style.display = 'block';

    // 实现轮播逻辑
    setInterval(() => {
      items[currentIndex].style.display = 'none';
      currentIndex = (currentIndex + 1) % items.length;
      items[currentIndex].style.display = 'block';
    }, 2000);
  }
}

<div class="carousel-container" #carouselContainer>
  <div class="carousel-item" *ngFor="let item of carouselItems">{{ item }}</div>
</div>

<app-pagination-carousel></app-pagination-carousel>