自动滑动的幻灯片组件通常由一个循环结构和一些指令组成。在 Angular 中，我们可以使用 ngFor 指令来循环列表，并且使用 setInterval 函数实现自动滑动的效果。

实现步骤如下：

1. 创建一个名为 slider 的组件，包含一个图片列表和当前图片的索引。

import { Component } from '@angular/core';

@Component({ selector: 'app-slider', templateUrl: './slider.component.html', styleUrls: ['./slider.component.css'] }) export class SliderComponent { images = [ 'https://picsum.photos/id/1/200/300', 'https://picsum.photos/id/2/200/300', 'https://picsum.photos/id/3/200/300', 'https://picsum.photos/id/4/200/300' ];

currentIndex = 0; }

2. 在 slider.component.html 文件中，使用 ngFor 指令循环列表，并为图片设置背景样式。

3. 在 slider.component.ts 文件中，使用 setInterval 函数实现幻灯片自动切换。

ngOnInit() { setInterval(() => { this.currentIndex = (this.currentIndex === this.images.length - 1) ? 0 : this.currentIndex + 1; }, 5000); }

4. 根据实际需要，添加相应的样式和动画效果。

.slider { position: relative; height: 600px; background-size: cover; background-position: center; animation-name: slide; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

.slider-content { position: absolute; top: 0;