Loop Not working

[sadiqueamt]

Hi,

Loop not working on dynamic content.

HTML: ` <swiper [config]="config">

{{fs.speaker_name}}

{{fs.speaker_job}}

          </div>
          <div class="swiper-pagination"></div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </swiper>`

TS File: `import { Component, OnInit } from '@angular/core'; import { SpeakersService } from 'projects/wurreka/src/app/services';

import { SwiperOptions } from 'swiper';

@Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] })

export class HomeComponent implements OnInit { speakers = []; insights: any; ondemands: any;

config: SwiperOptions = { effect: 'coverflow', coverflowEffect: { rotate: 22, stretch: 0, depth: 100, modifier: 1, slideShadows : false, },

autoplay: {
  delay: 1100,
  disableOnInteraction: false,
},
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: 'auto',
loopedSlides: 100,
spaceBetween: 50,
pagination: {
  el: '.swiper-pagination',
  clickable: true,
},
navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev'
},

};

constructor( private speakersService : SpeakersService, ) {

}

ngOnInit(): void { this.speakersService.speakers().subscribe( res => { this.speakers = res.data; }) }

} `