Html Angular 滑块问题

我目前正在开发一个Angular 的图像滑块组件，但我遇到了滑块无法按预期显示的问题.我在下面提供了我的滑块组件的代码.

slider.component.html:个

<div class="slider">
  <div class="container-slider">
    <div *ngFor="let image of images; let i = index" [ngClass]="{'slide': true, 'active-anim': currentSlideIndex === i}">
      <img [src]="getImageUrl(i)" alt="">
    </div>
    <button class="btn-slide prev" (click)="prevSlide()">
      <img src="../../../../assets/icons/prev.svg" alt="Previous">
    </button>
    <button class="btn-slide next" (click)="nextSlide()">
      <img src="../../../../assets/icons/next.svg " alt="Next">
    </button>
    <div class="container-dots">
      <div *ngFor="let image of images; let i = index" class="dot" [ngClass]="{'active': currentSlideIndex === i}" (click)="currentSlideIndex = i"></div>
    </div>
  </div>
</div>

slider.component.css:个

.container-slider {
  max-width: 650px;
  height: 500px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  border-radius: 36px;
  margin-left: 85px;
  margin-right: 60px;
  width: 100%;
  float: left;
}

@media (max-width: 1199px) {
  .container-slider {
    margin-right: 20px;
    margin-left: 20px;
  }
}

@media (max-width: 1000px) {
  .container-slider {
    margin: 100px auto;
    width: 95%;
    float: none;
    max-width: none;
    align-items: center;
  }
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: opacity ease-in-out 0.4s;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.active-anim {
  opacity: 1;
}

.btn-slide {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f1f1f1;
  border: 1px solid rgba(34, 34, 34, 0.287);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.btn-slide img {
  width: 25px;
  height: 25px;
  pointer-events: none;
}

.prev {
  top: 50%;
  left: 20px;
  transform: translateY(-60%);
}

.next {
  top: 50%;
  right: 20px;
  transform: translateY(-60%);
}

.container-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid #f1f1f1;
  margin: 0 5px;
  background: #f1f1f1;
}
.dot.active {
  background: rgb(32, 32, 32);
}

slider.component.ts:

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

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent {
  @Input() images: string[];
  currentSlideIndex = 0;

  nextSlide() {
    this.currentSlideIndex = (this.currentSlideIndex + 1) % this.images.length;
  }

  prevSlide() {
    this.currentSlideIndex = (this.currentSlideIndex - 1 + this.images.length) % this.images.length;
  }

  getImageUrl(index: number): string {
    return this.images[index];
  }
}

This is how I use my slider:个

<app-slider [images]="['../assets/images/img1.jpg', '../assets/images/img2.jpg', '../assets/images/img3.jpg']"></app-slider>

This is how my slider currently looks:

This is how slider should look:

我注意到滑块的布局和外观与我的预期不符.具体来说，我希望滑块有一个固定的宽度为650px，高度为500px，并在页面上水平居中.但是，尽管应用了这些样式，滑块仍未按预期显示.

有人能判断一下我的代码并提供如何解决此问题的指导吗？如有任何见解或建议，我们将不胜感激.谢谢!