Logo-nav

Learning Goals:

  1. In this exercise, the goal is understand and practice how state's work with class components in react.
  2. We will also learn, how to use pre-build react projects.
  3. In this exercise, we will also explore material ui for decoration purpose.

Starter Code:

The structure for this exercise is already created for you.

NOTE This project was created using npm create vite@latest command - which means all the necessary modules was installed when this command got executed. And then there are some external modules as well - like material ui; which was installed using npm install @mui/icons-material command. So, if you only clone this repository and start making changes in the required files, you will not able to see any changes, or you may ran into errors like - module not found. The main reason for this is that -- inside your project you are trying to use some modules, which your system may not have, so you need to install those modules first. So in order to install all the required modules -> you have to type this command on your terminal: npm install or npm i This will install all the required modules for this project to be working. You can explore more about this command 🙂.

You only have to edit following files in order to get the required output:

  1. components/Carousel.css
  2. components/Carousel.jsx

All the images are already imported in data/CarouselData.jsx.

We will be using our classes knowledge to implement this image carousel.

Problem Statement:

The task is to create an image carousel - as shown below:

image

Here is a gif, of how it should work like:

This is the link for the figma file which you can refer

Happy Coding ❤️!