1. Angular
  2. Components
  3. Activity

Practice Activity

Create a set of components which work together to create a Carousel which we can use to display different images in rotation.

Like so:

activity example

We also want the carousel delay between rotations to be configurable.

The markup for our carousel will look like so:

<carousel [delay]="2000">
  <carousel-item>
    <img src="https://unsplash.it/200?image=0" alt="">
  </carousel-item>
  <carousel-item>
    <img src="https://unsplash.it/200?image=100" alt="">
  </carousel-item>
  <carousel-item>
    <img src="https://unsplash.it/200?image=200" alt="">
  </carousel-item>
</carousel>

Steps

Fork this blitz:

https://stackblitz.com/github/codecraft-tv/angular-course/tree/current/4.components/9.activity/code/@activity

Finish off the components to implement the carousel.

Read any TODO comments in the blitz for hints.

Solution

When you are ready compare your answer to the solution in this blitz:

https://stackblitz.com/github/codecraft-tv/angular-course/tree/current/4.components/9.activity/code/@solution

Caught a mistake or want to contribute to the book? Edit this page on GitHub!