[react-slick] carousel / 배너 만들기
설치
-
react-slick을 설치한다.
yarn add react-slick
-
react-slick에서 제공해주고 있는 typescript의 타입들을 설치한다.
yarn add @types/react-slick --dev
- css import
import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";
2를 설치하지 않으면 이렇게 뜬다. [발생 이유]
사용하기
- [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() {
~}
제거
- react import 제거 : node.js에서는 이미 react가 Import 되어 있어서 없어도 된다.
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>
);
}
Author And Source
이 문제에 관하여([react-slick] carousel / 배너 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@e_juhee/react-slick저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)