Added slider to publications

src/App.css

@@ -1,63 +1,71 @@
-.App {
-    text-align: center;
-    background-color: #282c34;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    left: 0px;
-    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
-    color: azure;
-}
-
-.App-logo {
-    height: 40vmin;
-    pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
+    .App {
+        text-align: center;
+        background-color: #282c34;
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        left: 0px;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        color: azure;
+    }
+    
     .App-logo {
-        animation: App-logo-spin infinite 20s linear;
+        height: 40vmin;
+        pointer-events: none;
     }
-}
-
-.App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
-}
-
-.App-link {
-    color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
+    
+    @media (prefers-reduced-motion: no-preference) {
+        .App-logo {
+            animation: App-logo-spin infinite 20s linear;
+        }
     }
-    to {
-        transform: rotate(360deg);
+    
+    .App-header {
+        background-color: #282c34;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(10px + 2vmin);
+        color: white;
     }
-}
-
-.About {
-    width: 100%;
-    position: absolute;
-    top: 100px;
-    bottom: 0px;
-}
-
-hr {
-    width: 70%;
-    margin-left: 15% !important;
-    margin-right: 15% !important;
-    border: 10px solid aquamarine;
-}
-
-.publications {
-    margin-top: 150px;
-}
+    
+    .App-link {
+        color: #61dafb;
+    }
+    
+    @keyframes App-logo-spin {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+    
+    .About {
+        width: 100%;
+        position: absolute;
+        top: 120px;
+        bottom: 0px;
+    }
+    
+    hr {
+        width: 70%;
+        margin-left: 15% !important;
+        margin-right: 15% !important;
+        border: 10px solid aquamarine;
+    }
+    
+    .publications {
+        margin-top: 230px;
+    }
+    
+    .slick-dots button:before {
+        color: grey !important;
+    }
+    
+    .slick-dots li.slick-active button:before {
+        color: White !important;
+    }

src/App.js

@@ -5,18 +5,18 @@ import About from "./components/About";
 import Publication from "./components/Publication";
 import publicationData from "./components/publications.json"
 import { getByTitle } from "@testing-library/react";
+import SimpleSlider from "./components/publicationSlider";
 
 function App() {
   return (
     <div className="App">
       <Header />
       <hr></hr>
-      <About className ="About" />
-      <div className="publications">
+      <About className ="About" id="About"/>
+      <div className="publications" id="Publications">
         <h2 style={{color:"salmon", fontSize:"50px"}}><b>Publications</b></h2>
-        {publicationData.map(({title,authors, publish_date, abstract,link}) =>(
-          <Publication title={title} authors={authors} publish_date={publish_date} abstract={abstract} link={link}/>
-        ))}
+        <SimpleSlider/>
+
       </div>
     </div>
   );

src/components/Header.js

@@ -16,10 +16,10 @@ class Header extends Component {
                     <a href="./">Home</a>
                   </Col>
                   <Col>
-                    <a>About</a>
+                    <a href="#About">About</a>
                   </Col>
                   <Col>
-                    <a>Publications</a>
+                    <a href="#Publications">Publications</a>
                   </Col>
                 </Row>
               </Col>

src/components/about.css

@@ -3,7 +3,7 @@
     width: 75%;
     margin-top: 80px;
     margin-left: 12.5%;
-    padding-top: 4%;
+    padding-top: 5.5%;
     padding-bottom: 4%;
 }
 

src/components/publicationSlider.js

@@ -0,0 +1,43 @@
+import React, { Component } from "react";
+import Slider from "react-slick";
+import publicationData from "./publications.json"
+import Publication  from "./Publication";
+import "slick-carousel/slick/slick.css"; 
+import "slick-carousel/slick/slick-theme.css";
+import {FaArrowAltCircleRight,FaArrowAltCircleLeft} from "react-icons/fa"
+export default class SimpleSlider extends Component {
+    constructor(props) {
+    super(props);
+    this.next = this.next.bind(this);
+    this.previous = this.previous.bind(this);
+  }
+  next() {
+    this.slider.slickNext();
+  }
+  previous() {
+    this.slider.slickPrev();
+  }
+  render() {
+    const settings = {
+      dots: true,
+      infinite: true,
+      speed: 500,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+    };
+    return (
+      <div>
+        <Slider ref={c => (this.slider = c)} {...settings}>
+        {publicationData.map(({title,authors, publish_date, abstract,link}) =>(
+          <Publication title={title} authors={authors} publish_date={publish_date} abstract={abstract} link={link}/>
+        ))}
+        </Slider>
+        <div style={{ textAlign: "center"}}>
+            <FaArrowAltCircleLeft onClick={this.previous} style={{marginTop:"40px",marginBottom:"40px",borderRadius:"3em" ,fontSize:"40px", color:"aquamarine"}}/>
+
+            <FaArrowAltCircleRight onClick={this.next} style={{marginTop:"40px", marginBottom:"40px", borderRadius:"3em",fontSize:"40px",marginLeft:"30px", color:"salmon"}}/>
+        </div>
+      </div>
+    );
+  }
+}