front/src/components/carousel.tsx


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

import './carousel.css';
import Slider, { Settings } from 'react-slick';
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

export default function Carousel(props: { children: any }) {
  const settings: Settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1
  };

  return (
    <div class="carousel-wrapper">
      <Slider {...settings}>
        {
          props.children instanceof Array ?
            props.children.map((child: any) => {
              return (
                <div class="carousel-item">{child}</div>
              );
            })
            :
            <div class="carousel-item">{props.children}</div>
        }
      </Slider>
    </div>
  );
}