[react-slick] carousel / 배너 만들기

[React Slick 사이트]

설치

1. react-slick을 설치한다.
   yarn add react-slick

2. react-slick에서 제공해주고 있는 typescript의 타입들을 설치한다.
   yarn add @types/react-slick --dev

3. css import

import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

2를 설치하지 않으면 이렇게 뜬다. [발생 이유]

사용하기

1. [Eexamples]에서 원하는 배너를 골라 코드를 가져와서 적용한다.

   코드 변경한 내용

   • react import 제거 : node.js에서는 이미 react가 Import 되어 있어서 없어도 된다.
     import React, { Component } from "react"; 제거
   • class형을 함수형으로 변경
     export default class AutoPlay extends Component { --> export default function BannerUI() {
   • render 제거
     render() { ~ } 제거

import styled from "@emotion/styled";
import Slider from "react-slick";
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

const Wrapper = styled.div`
  height: 400px;
`;
const Image = styled.img`
  height: 400px;
  width: 800px;
  object-fit: fill;
`;

export default function BannerUI() {
  const settings = {
    // dots: true,
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    autoplay: true,
    speed: 5000,
    autoplaySpeed: 0,
    cssEase: "linear",
  };
  return (
    <Wrapper>
      {/* ...settings: 위의 객체 내용이 들어옴 */}
      <Slider {...settings}>
        <div>
          <Image src="/boards/banner/banner1.jpg" alt="london"></Image>
        </div>
        <div>
          <Image src="/boards/banner/banner2.jpg" alt="london"></Image>
        </div>
        <div>
          <Image src="/boards/banner/banner3.jpg" alt="london"></Image>
        </div>
        <div>
          <Image src="/boards/banner/banner1.jpg" alt="london"></Image>
        </div>
        <div>
          <Image src="/boards/banner/banner2.jpg" alt="london"></Image>
        </div>
        <div>
          <Image src="/boards/banner/banner3.jpg" alt="london"></Image>
        </div>
      </Slider>
    </Wrapper>
  );
}