create a carousel component

Create a carousel component

This component must take a list of objects as parameter. Each object must be made of:

• an image (png)
• a link (optional)

If the link is provided by clicking on the image a new tab opens on the link destination.

FR

Créer un composant carrousel

Ce composant doit prendre une liste d'objet en paramètre. Chaque objet doit être constitué de:

• une image (png)
• un lien (optionnel)

Si le liens est fournis en cliquant sur l'image un nouvel onglet s'ouvre sur la destination du lien.

example

Section : La Boîte à Outils est compatible avec in this page : https://www.lydra.eu/bao

Like this :

• https://codepen.io/studiojvla/pen/qVbQqW
• https://www.csscodelab.com/css-infinite-autoplay-carousel-design/

Les retours de Christophe :

• pouvoir definir l'objet carousel dans une variable. Ex : (https://lab.frogg.it/froggit/www/froggit.fr/-/blob/master/src/components/HomepageFeatures.js#L7)

const CarouselList = [
  {
    img: "img1.svg",
    link: "http://domain.tld"
  },
  {
    img: "img2.svg",
    link: "http://domain.tld"
  },
  {
    img: "img3.svg"  
  },
  {
    img: "img4.svg",
    link: "http://domain.tld"
  },
  {
    img: "img4.svg",
    link: "http://domain.tld"
  }]
  

• pouvoir passer cette variable au carousel. Ex : https://lab.frogg.it/froggit/www/froggit.fr/-/blob/master/src/components/HomepageFeatures.js#L67
• pouvoir réutiliser le composant carousel dans pleins de pages en le configurant au moment de l'appel

Slick carousel

npm install slick-carousel https://kenwheeler.github.io/slick/ https://github.com/kenwheeler/slick/