- implement a carousel described here as a React component
<Carousel images={['url1', 'url2']} />
- add an ability to customize
itemWidth
with default value of130px
- add
frameSize
- number of images displayed at the same time with the default of3
- add
step
(default 3) - number of images scrolled per click - add
animationDuration
(default1000
) - time in ms to show the new portion of images - (*) add an
infinite
prop (false
by default) - to do the carousel cyclic<Carousel images={['url1', 'url2']} step={3} frameSize={3} itemWidth={130} animationDuration={1000} infinite={false} />
- The title of the page should contain "Carousel"
- The page should contain inputs for:
itemWidth
frameSize
step
fnimationDuration
- Add data-cy attributes:
title
inside h1 tagnext
to the "Next" button
- Install Prettier Extention and use this VSCode settings to enable format on save.
- Implement a solution following the React task guideline.
- Use the React TypeScript cheat sheet.
- Open one more terminal and run tests with
npm test
to ensure your solution is correct. - Replace
<your_account>
with your Github username in the DEMO LINK and add it to the PR description.