antd의 슬라이더가 react-slick을 기반으로 만들어졌습니다.
결국은 slick으로 돌아왔습니다.
이제는 제가 직접 만든 carousel을 사용합니다.
다운로드 수가 상당히 많다.
일반 HTML 환경에서 jQuery를 사용할 수도 있겠다만 여기서는 React-slick을 살펴보도록 하자.
react-slick
React port of slick carousel
www.npmjs.com
공식 문서에서 참고하여 간단한 슬라이드를 만들어보았다.
아래 점을 커스터마이징했는데, 그냥 일반적인 함수형 컴포넌트이다.
import React from "react";
import Slider from "react-slick";
import styled from "styled-components";
export default class extends React.Component {
render() {
const settings = {
// 아래 dots 줄 것인가
dots: true,
// 좌우 화살표 줄 것인가
arrows: false,
// 마지막 슬라이드에서 처음 슬라이스로
infinite: true,
speed: 2000,
// 한 번에 스크롤 몇 개 보여줄 건가(대개 1을 사용함)
slidesToShow: 1,
// 스크롤 할 때마다 몇 장씩 넘길 것인가
slidesToScroll: 1,
// 자동 넘김을 할 것인가. 한다면 스피드는?
autoplay: true,
autoplaySpeed: 4000,
// 화면에 올리면 슬라이더가 자동으로 넘어가지 않음
pauseOnHover: true,
// 슬라이더를 넘기지 않고 fade in/out 하는 식으로 트랜지션 됨
fade: true,
// 레이지 로딩할 거야?
lazyLoad: true
// dots를 감싸고 있는
appendDots: (dots) => (
<div
style={{
padding: "50px",
}}
>
<ul style={{ margin: "0px" }}> {dots} </ul>
</div>
),
};
return (
<Slider {...settings}>
<div>
<GridWrapper>
<MainSection>
{/* <Head>Entertain your Learning</Head> */}
<Head>Sorry! Under Construction</Head>
<Desc>
with <Bold>Media based</Bold> language learning mobile
application!
</Desc>
</MainSection>
<CopyRight>
<div>
<i className="fas fa-map-marker-alt"></i> Yongsan-gu, Seoul,
South Korea
</div>
<div>Photo By Janis Rozenfelds | Unsplash</div>
</CopyRight>
</GridWrapper>
</div>
<div>
<GridWrapper2>
<MainSection>
{/* <Head>Entertain your Learning</Head> */}
<Head>Sorry! Under Construction</Head>
<Desc>
with <Bold>Media based</Bold> language learning mobile
application!
</Desc>
</MainSection>
<CopyRight>
<div>
<i className="fas fa-map-marker-alt"></i> Yongsan-gu, Seoul,
South Korea
</div>
<div>Photo By Janis Rozenfelds | Unsplash</div>
</CopyRight>
</GridWrapper2>
</div>
</Slider>
);
}
}
아, 그리고 중요한 저 밑에 dots를 커스터마이징 하는 문제는
이 게시물을 참고하자.
포인트는 dotClass이다.
Type: string
Default: 'slick-dots'
Description: CSS class for dots
이 클래스를 변경하면 기본적으로 slick에서 제공하는 css에서 벗어나게 된다.
아래 dot의 구조는 이렇다
'React, Next, Redux > ⚛ React.JS' 카테고리의 다른 글
| HOC을 통한 인증 미들웨어 (0) | 2020.05.30 |
|---|---|
| React에서의 form 구성과 post 방법 (0) | 2020.05.08 |
| Nested Routing (0) | 2020.04.14 |
| SPA에서 뒤로가기, 새로고침 시 404 Not Found 오류 해결 (0) | 2020.04.10 |
| Context API 상태 관리 라이브러리 (0) | 2020.03.23 |
