使用幻灯片动画创建轮播，还显示上一张和下一张图片

Question

我目前正在尝试创建轮播。我想遍历三个图像的数组。为此，我创建了一个增加函数，单击该函数即可正常工作。

export class CaseTemplateComponent implements OnInit {

  counter = 0;

  images = ['/assets/images/savum/savum-front.png', '/assets/images/savum/savum-iphone.png',
    '/assets/images/savum/savum-logo.png'];

  carouselImage = this.images[0];

  increase() {
    this.counter = this.counter === 2 ? 0 : this.counter + 1;
    this.carouselImage = this.images[this.counter];
  }

  ...

}

<div class="container px-0 carousel">

  <div [ngStyle]="{ 'background-image': 'url(' + carouselImage + ')'}" class=" img-container" (click)="increase()">

  </div>

</div>

.img-container {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 80vh;
}

现在，当前轮播图片仅显示一个div-如何使所有图片显示在一行中？确切地说，我希望当前图像占据中间的大部分空间-左侧是上一张图像（仅显示部分图像，其余部分溢出）-右侧是下一张图像（再次仅显示部分图像）图片）。

此外，我希望div /图像在点击时滑至下一个位置。

如何结合此动画来实现这一目标？我已经尝试了一段时间，但还没有成功。