Resolve "create a carousel component"

Closes #90 (closed)

src/components/Carousel.js

+/* eslint react/prop-types: 0 */
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+function CarouselElement({name, img, link}) {
+  if (typeof link === "undefined" && typeof name === "undefined") {
+    return (
+      <div className="box_carousel">     
+        <div>
+          <img src={useBaseUrl(img)} className="carousel-img" />
+        </div>
+      </div>
+    );
+  }
+
+  else if (typeof link === "undefined") {
+    return (
+      <div className="box_carousel">     
+        <div>
+          <img src={useBaseUrl(img)} className="carousel-img" />
+          <h6 className="title_carousel">{name}</h6>
+        </div>
+      </div>
+    );
+  }
+
+  else if (typeof name === "undefined") {
+    return (
+      <div className="box_carousel">
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img src={useBaseUrl(img)} className="carousel-img" />
+        </a>
+      </div>
+    );
+  }
+
+  else {
+    return (
+      <div className="box_carousel">
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img src={useBaseUrl(img)} className="carousel-img" />
+          <h6 className="title_carousel">{name}</h6>
+        </a>
+      </div>
+    );
+  }
+}
+
+export default function Carousel(props) {
+  const list = props.list;
+  //https://react-slick.neostack.com/docs/api/
+  const settings = {
+    dots: false,
+    infinite: true,
+    slidesToShow: 2,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: 4000,
+    autoplaySpeed: 4000,
+    variableWidth: true,
+    cssEase: "linear"
+  };
+
+  return (
+    <div>
+      <Slider {...settings}>
+        {list.map((props, idx) => (
+          <CarouselElement key={idx} {...props} />
+        ))}
+      </Slider>
+    </div>
+  );
+}