Ion-slides loop property doesn't work with ngFor

Hi everyone I am currently testing the “ion-slides” component with ngFor loop for my ionic-angular app and I have a problem; I followed the instruction from documentation
(https://ionicframework.com/docs/api/slides) and https://swiperjs.com/api/
and when I dont use the ngFor it works fine but ngFor loop it doesn’t work and the slide locks at the end of the array

my html code:

<ion-slides #theSlides [options]="slideOpts">
        <ion-slide *ngFor="let peer of peers" >
          <p>peer</p>
        </ion-slide>
</ion-slides>
<img class="nextIcon" src="../../assets/imgs/nextIcon/nextIcon@3x.png (click)="moveToNext(theSlides)">
    <img class="prevIcon" src="../../assets/imgs/prevIcon/prevIcon@3x.png" 
        (click)="moveToPrev(theSlides)">

<ion-button (click)="click()"></ion-button>

and .ts

@ViewChild('theSlides' , {  static: false }) slides: IonSlides;
  slideOpts = {
    loop: true,
    slidesPerView: 3,
  };
  

  constructor() {}


  moveToNext(slides) {
    slides.slideNext()
 }

  moveToPrev(slides) {
    slides.slidePrev()
  }

  click () {
    var peer
    this.peers.push(peer)
  }

  

the other properties of slideOpts works like a charm but not loop property.
I appreciate if you can tell what is wrong here with my code thank you.