This is a simple REACT carousel component which accepts both pictures as background and any HTML content as content.
To set up the project run the following:
Is needed for the folowing to work properly!
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
This is a basic setup, index.js renders just one component - Slider! The component recieves props:
- autoplay - is a boolean (true/false) and will determine wethere the autoplay functionality is enabled
- autoplayTime - is a number (in miliseconds) and will determine the timeout for the autoplay
- buttons - is a boolean (true/false) and will determine wethere there will be buttons (arrows) on the sides of the slider
- data - is and array of objects, each object is one slide content.
Structure of the object: {
bgColor: a string that will determine the background color of the slide ex. 'white' or '#fff'
bgImage: a link to the background image of the slide
content: any HTML object
} - dots - is a boolean (true/false) and will determine wethere there will be clickable dots at the bottom of the slider
- Currently slide size is hardcoded to 720x720, but it is easily to change to set it as a prop also.