├── README.md
├── contentstack_icon.svg
├── package-lock.json
├── package.json
├── public
└── index.html
└── src
├── Item.js
├── index.js
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | ## React carousel component
2 |
3 | Steps to install :
4 |
5 | 1.Download the folder/git clone the repo
6 |
7 | 2.cd root directory of the folder
8 |
9 | 3.npm install
10 |
11 | 4.npm start
12 |
13 | Access localhost:3000 on your browser
14 |
--------------------------------------------------------------------------------
/contentstack_icon.svg:
--------------------------------------------------------------------------------
1 |
29 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-elastic-carousel",
3 | "version": "1.0.0",
4 | "description": "A playground for the react-elastic-carousel package. \nhttps://sag1v.github.io/react-elastic-carousel/",
5 | "keywords": [],
6 | "main": "src/index.js",
7 | "dependencies": {
8 | "react": "16.13.1",
9 | "react-dom": "16.13.1",
10 | "react-elastic-carousel": "0.6.1",
11 | "react-scripts": "3.4.1",
12 | "styled-components": "5.1.0"
13 | },
14 | "devDependencies": {},
15 | "scripts": {
16 | "start": "react-scripts start",
17 | "build": "react-scripts build",
18 | "test": "react-scripts test --env=jsdom",
19 | "eject": "react-scripts eject"
20 | },
21 | "browserslist": {
22 | "production": [
23 | ">0.2%",
24 | "not dead",
25 | "not op_mini all"
26 | ],
27 | "development": [
28 | "last 1 chrome version",
29 | "last 1 firefox version",
30 | "last 1 safari version"
31 | ]
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 |
23 | React App
24 |
25 |
26 |
27 |
30 |
31 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/Item.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | export default styled.div`
4 | display: flex;
5 | justify-content: center;
6 | align-items: center;
7 | height: 250px;
8 | width: 100%;
9 | background-color: #00008B;
10 | color: #fff;
11 | margin: 0 15px;
12 | font-size: 4em;
13 | `;
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import Carousel from "react-elastic-carousel";
4 | import Item from "./Item";
5 | import "./styles.css";
6 |
7 | const breakPoints = [
8 | { width: 1, itemsToShow: 1 },
9 | { width: 550, itemsToShow: 2 },
10 | { width: 768, itemsToShow: 3 },
11 | { width: 1200, itemsToShow: 4 },
12 | ];
13 |
14 | function App() {
15 | return (
16 | <>
17 | Example to setup your carousel in react
18 |
19 |
20 | - One
21 | - Two
22 | - Three
23 | - Four
24 | - Five
25 | - Six
26 | - Seven
27 | - Eight
28 |
29 |
30 |
31 | );
32 | }
33 |
34 | const rootElement = document.getElementById("root");
35 | ReactDOM.render(, rootElement);
36 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | .App {
2 | font-family: sans-serif;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | height: 100vh;
7 | }
8 |
--------------------------------------------------------------------------------