Portfolio/src/components/publicationSlider.js

import React, { Component } from "react";
import Slider from "react-slick";
import publicationData from "../data/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 style={{ height: "auto" }}>
        <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>
    );
  }
}