feat: css on slick slide

src/components/Carousel.js

-// import React from "react";
-// import clsx from "clsx";
-// import Slider from "react-slick";
-// import "slick-carousel/slick/slick.css";
-// import "slick-carousel/slick/slick-theme.css";
-// import useBaseUrl from "@docusaurus/useBaseUrl";
-// import styles from "./Carousel.module.css";
-const CarouselList = [
-  {
-    names: "Acceuil",
-    img: "/img/docusaurus.png",
-    link: "https://froggit.fr/",
-  },
-  {
-    names: "FAQ",
-    img: "/img/bouclier.svg",
-    link: "/faq",
-  },
-  {
-    names: "Communauté",
-    img: "/img/docusaurus.png",
-    link: "/communaute",
-  },
-  {
-    names: "Acceuil",
-    img: "/img/docusaurus.png",
-    link: "https://froggit.fr/",
-  },
-  {
-    names: "Tarifs",
-    img: "/img/logo_typo_froggit.png",
-    link: "/tarifs",
-  },
-  {
-    names: "Communauté",
-    img: "/img/docusaurus.png",
-    link: "/communaute",
-  }
-];
-
-console.log("coucou")
+import React from "react";
+import clsx from "clsx";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+
+
+
+// console.log("coucou")
 //on retrouve ttes les var du composant CarouselElement
 //Les images doivent avoir toute la même taille
 //si le link est null/empty, alors ne pas afficher d'hyperlien
 // si le nombre d'image ne vaut pas la "taille", 
-function CarouselElement({names, img, link}) {
-  console.log("Coucou deux")
+// function CarouselElement({name, img, link}) {
+//   console.log("Coucou deux")
 
-  // if (CarouselList) {
-  //   link == null;
-  //   console.log(delete CarouselList.link)
+//   if (CarouselList) {
+//     link == null;
+//     console.log(delete CarouselList.link)
 
 
-    // return (
-    //   delete CarouselList.link;
-    // )
+//     return (
+//       delete CarouselList.link;
+//     )
 
 
 
-  // }
-  // else {
-  //   console.log("salut");
-  // }
-}
-
-CarouselElement = (linkdel) => {
-  const newLinkDel = this.state.links.filter(element.name !== (linkdel.name));
-  this.setState({links:newLinkDel});
-  console.log(newLinkDel + "c'est ici");
-}
-
-console.log(CarouselElement.names);
-  // return (
-    /* <div className="text--center"> */
-
+//   }
+//   else {
+//     console.log("salut");
+//   }
+// }
 
-//     <div>
-//       <a href={link} target="_blank" rel="noopener noreferrer">
-//         <img src={useBaseUrl(img)} className="carousel-img" />
-//         <h6>{name}</h6>
-//       </a>
-//     </div>
-//   );
+// CarouselElement = (linkdel) => {
+//   const newLinkDel = this.state.links.filter(element.name !== (linkdel.name));
+//   this.setState({links:newLinkDel});
+//   console.log(newLinkDel + "c'est ici");
 // }
-  
-// https://fr.reactjs.org/docs/lists-and-keys.html
-// export default function Carousel(props) {
-//   const list = props.list;
 
+// console.log(CarouselElement.names);
+// return (
+/* <div className="text--center"> */
+
+function CarouselElement({name, img, link}) {
+  return (
+    <div className="img_carousel">
+      <a href={link} target="_blank" rel="noopener noreferrer">
+        <img src={useBaseUrl(img)} className="carousel-img" />
+        <h6>{name}</h6>
+      </a>
+    </div>
+  );
+}
 
+// https://fr.reactjs.org/docs/lists-and-keys.html
+export default function Carousel(props) {
+  const list = props.list;
 
+  //Ralentir la vitesse
+  //augmenter le nombre d'éléments à afficher
+  const settings = {
+    dots: true,
+    infinite: true,
+    slidesToShow: 5,
+    slidesToScroll: 1,
+    autoplay: true,
+    speed: 4000,
+    autoplaySpeed: 4000,
+    cssEase: "linear"
+  };
 
 
   // return (
@@ -101,30 +81,16 @@ console.log(CarouselElement.names);
   //   </section>
   // );
 
-  //Ralentir la vitesse
-  //augmenter le nombre d'éléments à afficher
-
-  // const settings = {
-  //   dots: true,
-  //   infinite: true,
-  //   slidesToShow: 5,
-  //   slidesToScroll: 1,
-  //   autoplay: true,
-  //   speed: 4000,
-  //   autoplaySpeed: 4000,
-  //   cssEase: "linear"
-  // };
-
   // On a un carousel qui affiche un élément de la liste
-//   return (
-//     <div>
-//       <Slider {...settings}>
+  return (
+    <div>
+      <Slider {...settings}>
 
-//         {list.map((props, idx) => (
-//           <CarouselElement key={idx} {...props} />
-//         ))}
+        {list.map((props, idx) => (
+          <CarouselElement key={idx} {...props} />
+        ))}
 
-//       </Slider>
-//     </div>
-//   );
-// }
+      </Slider>
+    </div>
+  );
+}

src/components/Carousel.module.css

-/* .slick-slider .carousel-img {
-    margin: 20px;
-    width: 20px;
-} */
-
-
-
-/* .slick-slider .slick-initialized img{
-    margin: 20px;
-    width: 20px;
-} */
-
-.slick-list img {
-    margin: 20px;
-    width: 20px;
-}
-
-.carousel-img .slick-slider {
-    margin: 20px;
-    width: 20px;
-}
\ No newline at end of file

src/components/CarouselLibre.js

-// import React from "react";
-// import Carousel from "./Carousel";
+import React from "react";
+import Carousel from "./Carousel";
 
 const CarouselList = [
   {
@@ -34,13 +34,11 @@ const CarouselList = [
   }
 ];
 
-// export default function CarouselLibre() {
-//   return (
-//     //on donne la liste au composant carousel
-//     //le composant carousel a comme props l'objet carousel list
+export default function CarouselLibre() {
+  return (
+  //on donne la liste au composant carousel
+  //le composant carousel a comme props l'objet carousel list
     
-//     <Carousel list={CarouselList} />
-//   );
-// }
-
-console.log(delete CarouselList.link)
\ No newline at end of file
+    <Carousel list={CarouselList} />
+  );
+}
\ No newline at end of file

src/css/carousel.css

+/* CAROUSEL */
+.carousel-img {
+    margin: 20px;
+    width: 20px;
+}

src/css/custom.css

@@ -4,6 +4,7 @@
 @import url("dark-theme.css");
 @import url("matomo.css");
 @import url("tarifs.css");
+@import url("carousel.css");
 
 
 html, body {