Проблема с угловым слайдером

В настоящее время я разрабатываю компонент слайдера изображений в Angular, но столкнулся с проблемой, из-за которой слайдер не отображается должным образом. Ниже я предоставил код для своего компонента слайдера.

слайдер.компонент.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>

слайдер.компонент.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);
}

слайдер.компонент.ц:

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];
  }
}

Вот как я использую слайдер:

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

Вот как сейчас выглядит мой слайдер:

Вот как должен выглядеть слайдер:

И я заметил, что расположение и внешний вид слайдера не соответствуют моим ожиданиям. В частности, я хочу, чтобы слайдер имел фиксированную ширину 650 пикселей, высоту 500 пикселей и располагался по центру страницы по горизонтали. Однако, несмотря на применение этих стилей, ползунок отображается не так, как предполагалось.

Может ли кто-нибудь просмотреть мой код и дать рекомендации по решению этой проблемы? Любые идеи или предложения будут с благодарностью приняты. Спасибо!