this.autoPlay causing page to keep loading

I am working on a project and I have added a carousel in it but when I apply this.autoPlay() then the page is rendered on the browser but just keeps loading ,And nothing was visible on the page, but when I removed this.autoPlay() the page was working properly, But I need it very much but it is not working, how do I solve this problem.

review my code and give me solution for this

import { Component } from '@angular/core';
import { homeCarouselData } from '../../../Data/mainCarousel';

@Component({
selector: 'app-main-carousel',
templateUrl: './main-carousel.component.html',
styleUrls: ['./main-carousel.component.scss']
})
export class MainCarouselComponent {

carouselData:any;

currentSlide=0;
interval:any;

ngOnInit() {
this.carouselData=homeCarouselData;
this.autoPlay();
}

autoPlay(){
setInterval(()=>{
this.nextSlide();
},2000)
}

nextSlide() {
this.currentSlide=(this.currentSlide+1) % this.carouselData.length;
}

}

Continue reading...