Home > front end >  How to implement carousel in angular 10?
How to implement carousel in angular 10?

Time:10-13

I want to implement carousel in angular without using bootstrap and third party library. I added this code but this didn't work I have to add carousel for the images I have added go next and goprev functionalities, where index is initialized as 0. let output Of outputimages ---> loop which contains the api result. output.ImageBinary --> contain the image in binary.

 goNext() {
this.index = this.index === this.outputimages.length ? this.index : this.index   1;

} getPrev() { this.index = this.index === 0 ? 0 : this.index - 1; }

CodePudding user response:

Well, not sure if you are making API call in order to fetch and render "next" or "prev" image each time or fetching images at once and then iterating over, but I have implemented this on stackblitz, considering the former case.

It makes use of subscriptions and setTimeout to achieve the carousal like behaviour.

Please have a look.

Thanks to https://picsum.photos/ for providing a handy API for images.

  • Related