Card Slider🃏

Component developed with React and Tailwind. Its a simple but beautiful design of a card component.

The Card Slider was the 5th project for my Barcelona ITAcademy course.

Main Skills

React

• Comunication between components.
• State Hooks.

JavaScript

• Understanding OOP concepts.

SOLID Principles

CSS

• Using TailwindCSS to customize layout.
• Responsive Design.

Images

Description

The objective of this project is to create a slider of cards given an array of objects with each card information.

1. Given an array of objects with the title, description, background color and an image URL, the app will print a card for each object.
2. With a State Hook that controlls the step that the user currently is, the Card component which is rendered will be different.
3. To create the slide effect, every card will be printed, but its overflow will be hidden. So every time the user selects a new step, the card will translate-x a 100% multiplied by the current step. This will create the slider effect.