[React] react-slick : 이미지 슬라이드/캐러셀 구현하기 (Carousel)

각각의 이미지 카드를 자동으로 순환시켜 슬라이드 쇼 형식으로 보여주고 싶었다. 이런 방식을 캐러셀이라고 하고, 다음의 라이브러리를 이용하여 구현할 수 있었다!

 

---

 

이미지 슬라이드/캐러셀 구현하기 (Carousel)

1. 라이브러리 설치

2. 라이브러리 imort하여 적용

3. 코드 구현

4. 스타일 수정 

 

1. 라이브러리 설치

$ yarn add react-slick
$ yarn add slick-carousel

 

2. 라이브러리 import

import Slider from "react-slick";

// 스타일 수정이 필요할 시 import
import "~slick-carousel/slick/slick.css"; 
import "~slick-carousel/slick/slick-theme.css";

 

3. 코드 구현

const Carousel = () => {
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,		// 자동 넘김
    };

    return (
        <Container>
            <SlickSlider {...settings}>
                <Card>1</Card>
                <Card>2</Card>
                <Card>3</Card>
            </Slider>
        </Container>
    )
}

 

4. 스타일 수정

Styled-components를 사용하여 수정하였다. 본인의 스타일대로 바꿔주면 된다!

const SlickSlider = styled(Slider)`
    width: 100%;
    height: 100% .slick-list {
        margin: 0 auto;
        overflow-x: hidden;
    }

    .slick-dots {
        //슬라이드의 위치
        bottom: -10px;
    }
`;