Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit ba7878e4 authored by Julie Thezenas's avatar Julie Thezenas
Browse files

bug: code carousel list doesnt work

parent 11e10aff
No related branches found
No related tags found
No related merge requests found
Pipeline #6714 failed
This commit is part of merge request !62. Comments created here will be created in the context of that merge request.
...@@ -3,106 +3,15 @@ import Slider from 'react-slick'; ...@@ -3,106 +3,15 @@ import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css'; import 'slick-carousel/slick/slick-theme.css';
import Docusaurus from "/static/img/docusaurus.png"; import Docusaurus from "/static/img/docusaurus.png";
import useBaseUrl from "@docusaurus/useBaseUrl";
import CarouselData from './CarouselData';
// const personList = persons.map(person => (
// function Carousel() { // <h2>{person.name}</h2>
// <img src={useBaseUrl(person.img)} />
// const settings = { // ))
// dots: true, // return <Slider {...settings}><div>{personList}</div></Slider>
// infinite: true, function Carousel({imgcarousel, link}) {
// slidesToShow: 3,
// slidesToScroll: 1,
// autoplay: true,
// speed: 2000,
// autoplaySpeed: 2000,
// cssEase: "linear"
// };
// return (
// <div>
// <h2>Auto Play</h2>
// <Slider {...settings}>
// <div>
// <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
// <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
// </a>
// </div>
// <div>
// <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
// <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
// </a>
// </div>
// <div>
// <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
// <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
// </a>
// </div>
// <div>
// <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
// <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
// </a>
// </div>
// <div>
// <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
// <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
// </a>
// </div>
// <div>
// <a href="https://lab.frogg.it/froggit" target="_blank" rel="noreferrer">
// <img className="footer_icons" src={Docusaurus} alt="Logo Froggit blanc" />
// </a>
// </div>
// </Slider>
// </div>
// )
// }
// export default Carousel
// function Carousel() {
// const Users = () => {
// const data = [
// { id: 1, name: "John Doe" },
// { id: 2, name: "Victor Wayne" },
// { id: 3, name: "Jane Doe" },
// ];
// return (
// <div className="users">
// {data.map((user) => (
// <div className="user">{user}</div>
// ))}
// </div>
// );
// };
// }
//methode de base
// function Carousel() {
// const names = ["Mamad", "Lola", "Shau"]
// return (
// <div>
// <h2>{names[0]}</h2>
// <h2>{names[1]}</h2>
// <h2>{names[2]}</h2>
// </div>
// )
// }
//methode de map
// function Carousel() {
// const names = ["Mamad", "Lola", "Shau"]
// const nameList = names.map(name => <h2>{name}</h2>)
// return <div>{nameList}</div>
// }
// methode list
function Carousel() {
const settings = { const settings = {
dots: true, dots: true,
...@@ -113,33 +22,15 @@ function Carousel() { ...@@ -113,33 +22,15 @@ function Carousel() {
speed: 2000, speed: 2000,
autoplaySpeed: 2000, autoplaySpeed: 2000,
cssEase: "linear" cssEase: "linear"
}; };
const persons = [
{
id: 1,
name: "Mamad",
img: "http://www.dixielandtarragona.com/wp-content/uploads/2020/08/grandparent-totoro-FB-696x365.jpg",
},
{
id: 2,
name: "Lola",
img: "http://www.dixielandtarragona.com/wp-content/uploads/2020/08/grandparent-totoro-FB-696x365.jpg",
},
{
id: 3,
name: "Lesli",
img: "http://www.dixielandtarragona.com/wp-content/uploads/2020/08/grandparent-totoro-FB-696x365.jpg",
}
]
const personList = persons.map(person => (
<h2>{person.name}</h2>
))
return <Slider {...settings}><div>{personList}</div></Slider>
} }
export default function TheCarousels() {
export default Carousel return (
<div>
{CarouselList.map((imgcarousel, link) => (
<Carousel key={CarouselList} />
))}
</div>
);
}
import React from 'react';
function CarouselData () {
const CarouselList = [
{
name: "Mamad",
imgcarousel: "/static/img/docusaurus.png",
link: "",
},
{
name: "Lola",
imgcarousel: "/static/img/docusaurus.png",
link: "",
},
{
name: "Lesli",
imgcarousel: "/static/img/docusaurus.png",
link: "",
}
]
}
export default CarouselData
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment