Skip to content

HigorPedroso/react_carousel

 
 

Repository files navigation

React Carousel

React + Typescript cheat sheet

  1. implement a carousel described here as a React component
    <Carousel images={['url1', 'url2']} />
  2. add an ability to customize itemWidth with default value of 130px
  3. add frameSize - number of images displayed at the same time with the default of 3
  4. add step (default 3) - number of images scrolled per click
  5. add animationDuration (default 1000) - time in ms to show the new portion of images
  6. (*) 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}
    />

REQUIREMENTS:

  1. The title of the page should contain "Carousel"
  2. The page should contain inputs for:
    • itemWidth
    • frameSize
    • step
    • fnimationDuration
  3. Add data-cy attributes:
    • title inside h1 tag
    • next to the "Next" button

Instructions

  • 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.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 68.2%
  • JavaScript 25.0%
  • HTML 6.4%
  • SCSS 0.4%