slider not working

.eslintcache

@@ -1 +1 @@
-[{"C:\\Projects\\recruitment-task\\src\\index.js":"1","C:\\Projects\\recruitment-task\\src\\reportWebVitals.js":"2","C:\\Projects\\recruitment-task\\src\\App.js":"3","C:\\Projects\\recruitment-task\\src\\Headline\\Headline.js":"4","C:\\Projects\\recruitment-task\\src\\Box\\Box.js":"5","C:\\Projects\\recruitment-task\\src\\Content\\ContentSlider.js":"6","C:\\Projects\\recruitment-task\\src\\Content\\Content.js":"7"},{"size":500,"mtime":1608625176780,"results":"8","hashOfConfig":"9"},{"size":362,"mtime":1608625176780,"results":"10","hashOfConfig":"9"},{"size":345,"mtime":1610013408847,"results":"11","hashOfConfig":"9"},{"size":238,"mtime":1609942164780,"results":"12","hashOfConfig":"9"},{"size":686,"mtime":1610135957383,"results":"13","hashOfConfig":"9"},{"size":2068,"mtime":1610135963133,"results":"14","hashOfConfig":"9"},{"size":1239,"mtime":1610015284464,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"lpoaq4",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Projects\\recruitment-task\\src\\index.js",[],["31","32"],"C:\\Projects\\recruitment-task\\src\\reportWebVitals.js",[],"C:\\Projects\\recruitment-task\\src\\App.js",[],"C:\\Projects\\recruitment-task\\src\\Headline\\Headline.js",[],"C:\\Projects\\recruitment-task\\src\\Box\\Box.js",[],"C:\\Projects\\recruitment-task\\src\\Content\\ContentSlider.js",["33"],"C:\\Projects\\recruitment-task\\src\\Content\\Content.js",[],{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":21,"column":5,"nodeType":"40","messageId":"41","endLine":21,"endColumn":10},"no-native-reassign",["42"],"no-negated-in-lhs",["43"],"no-unused-vars","'width' is assigned a value but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
+[{"C:\\Projects\\recruitment-task\\src\\index.js":"1","C:\\Projects\\recruitment-task\\src\\reportWebVitals.js":"2","C:\\Projects\\recruitment-task\\src\\App.js":"3","C:\\Projects\\recruitment-task\\src\\Headline\\Headline.js":"4","C:\\Projects\\recruitment-task\\src\\Box\\Box.js":"5","C:\\Projects\\recruitment-task\\src\\Content\\ContentSlider.js":"6","C:\\Projects\\recruitment-task\\src\\Content\\Content.js":"7"},{"size":500,"mtime":1608625176780,"results":"8","hashOfConfig":"9"},{"size":362,"mtime":1608625176780,"results":"10","hashOfConfig":"9"},{"size":345,"mtime":1610013408847,"results":"11","hashOfConfig":"9"},{"size":238,"mtime":1609942164780,"results":"12","hashOfConfig":"9"},{"size":686,"mtime":1610458165567,"results":"13","hashOfConfig":"9"},{"size":2952,"mtime":1610492688678,"results":"14","hashOfConfig":"9"},{"size":1239,"mtime":1610015284464,"results":"15","hashOfConfig":"9"},{"filePath":"16","messages":"17","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},"lpoaq4",{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"18"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"C:\\Projects\\recruitment-task\\src\\index.js",[],["31","32"],"C:\\Projects\\recruitment-task\\src\\reportWebVitals.js",[],"C:\\Projects\\recruitment-task\\src\\App.js",[],"C:\\Projects\\recruitment-task\\src\\Headline\\Headline.js",[],"C:\\Projects\\recruitment-task\\src\\Box\\Box.js",[],"C:\\Projects\\recruitment-task\\src\\Content\\ContentSlider.js",[],"C:\\Projects\\recruitment-task\\src\\Content\\Content.js",[],{"ruleId":"33","replacedBy":"34"},{"ruleId":"35","replacedBy":"36"},"no-native-reassign",["37"],"no-negated-in-lhs",["38"],"no-global-assign","no-unsafe-negation"]

package.json

@@ -9,6 +9,7 @@
     "normalize.css": "^8.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-elastic-carousel": "^0.11.0",
     "react-scripts": "4.0.1",
     "styled-components": "^5.2.1",
     "web-vitals": "^0.2.4"

public/index.html

@@ -9,38 +9,16 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="reset.css">
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <link rel="stylesheet" href="reset.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet"> 
     <title>PSD2CSS</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>

src/Box/box.sass

@@ -6,14 +6,34 @@ $black: rgba(45, 50, 54, 1)
     width: 100%
     padding-bottom: 66%
     position: relative
+    display: none
+    &:nth-of-type(1)
+        display: inline-block
+
+
 
 @media ( min-width: 786px )
+    .box
+        width: 48%
+        padding-bottom: 32%
+        margin-right: 4%
+        &:nth-of-type(2)
+            display: inline-block
+            margin: 0
+
+@media ( min-width: 1200px )
     .box
         width: 32%
         padding-bottom: 21%
+        margin-right: 2%
+        &:nth-of-type(3)
+            display: inline-block
+            margin-right: 0
+            margin-left: 2%
 
 .box__content
     width: 100% 
+    min-height: 220px
     position: absolute
     display: flex
     flex-direction: column

src/Content/ContentSlider.js

@@ -2,6 +2,7 @@ import React from 'react';
 import './content.css';
 import Box from '../Box/Box';
 
+
 const boxData = [
     {
         heading: "Heading",
@@ -18,45 +19,66 @@ const boxData = [
     },
 ];
 
-let width = Screen.availWidth;
+let data = boxData;
 
 class ContentSlider extends React.Component {
     constructor(props){
         super(props);
-        this.state = {data:boxData}
+        this.state = {data: data}
+        this.indexDecreas = this.indexDecreas.bind(this);
+        this.indexIncreas = this.indexIncreas.bind(this);
     }
 
-
 
-    // changeSize(){
-    //     if (width < 786) {
-    //         this.setState({data: boxData.splice(1,2)})
+    indexDecreas() {
+    //     console.log(boxData[0])
+    //     console.log(boxData[1])
+    //     console.log(boxData[2])
+    //     this.state.data.map((element, index, arr) => {
+    //     if (index-1 < 0) {
+    //         arr[index] = this.state.data[this.state.data.length-1]
+    //         return this.setState({data: data[0]=arr[index]})
     //     } else {
-    //         this.setState({data: boxData})
+    //         arr[index] = this.state.data[index-1]
+    //         return this.setState({data: data[index]=arr[index]})
     //     }
-    // }    
+    // })
+        let { data } = this.state
+        for (let i = 0; i < data.length; i++) {
+            console.log(data)
+            if ( i === 0 ) {
+                return this.setState({data : data[0] = this.state.data[this.state.data.length-1]})
+            } 
+            data[i] = this.state.data[i-1];
+            return this.setState({data: data})
+        }
+        console.log(data);
+    }
 
-    // componentDidMount(){
-    //     window.addEventListener('resize',this.changeSize);
-    // }
-    // componentWillUnmount(){
-    //     window.removeEventListener('resize',this.changeSize);
-    // }
+
+    indexIncreas() {
+        console.log(boxData[0])
+        boxData.map((element, index) => {
+        if (index+1 > boxData.length) {
+        return element[index] = element[0]
+        }
+        return element[index]=element[index+1]
+    })
+    }
 
     render(){
-        // let {data} = this.state
         return(
             <section className="content content--blueBackround">
                 <div className="container">
-                    <div className="arrow"><img src="./assets/arrow.svg" alt="arrow left" /></div>
+                    <div className="arrow" onClick={this.indexDecreas}><img src="./assets/arrow.svg" alt="arrow left" /></div>
                     <div className="content__interior  content__interior--headingWhite">
                         <h1>Heading</h1>
                         <p>Lorem ipsum dolor sit amet, consect etur adipiscing elit.</p>
                         <div className="content__interior__wrapper">
-                            <Box boxData={boxData}></Box>
+                            <Box boxData={data}></Box>
                         </div>
                     </div> 
-                    <div className="arrow"><img className="arrow--right" src="./assets/arrow.svg" alt="arrow right" /></div>
+                    <div className="arrow" onClick={this.indexIncreas}><img className="arrow--right" src="./assets/arrow.svg" alt="arrow right" /></div>
                 </div>
             </section>
         )