Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/* 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>
);
}