react-slick을 설치한다.
yarn add react-slick
react-slick에서 제공해주고 있는 typescript의 타입들을 설치한다.
yarn add @types/react-slick --dev
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";
2를 설치하지 않으면 이렇게 뜬다. [발생 이유]
코드 변경한 내용
- 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>
);
}