React Slick 사용하기

Carousel

Carousel은 회전목마 라는 뜻으로 웹 페이지에 사진과 같은 콘텐츠를 슬라이드 형식으로 나타는 것입니다.

설치하기

yarn add react-slick

를 통해 설치 해주면 됩니다.

사용하기

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

 

사용할 컴포넌트에 import를 3가지를 해줍니다.

Slider 는 Carousel를 구현해주는 하나의 컴포넌트이고 나머지는 css 파일들입니다.

 

https://react-slick.neostack.com/

Neostack

위 링크처럼 사용해주면 됩니다.

 

셋팅 설정하기

import React from "react";

import DogData from '../json/Dog.json'
import CatData from '../json/Cat.json'

/*slick*/
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

import { StyledSlider, SliderContentWrapper, Img } from "../styles/BestCarousel";

import Slider from "react-slick";

export default function Carousel(){
    const settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay : true,
        autoplaySpeed : 3000,

    }
    const Data = {...Data1, ...Data2 }

    return(
        <>
            <StyledSlider {...settings}>
                <SliderContentWrapper>
                    <Img src={Data.1[0].src} alt='x' />
                </SliderContentWrapper>
                <SliderContentWrapper>
                    <Img src={Data.2[1].src} alt='x' />
                </SliderContentWrapper>

            </StyledSlider>
        </>
    )
}

 

컴포넌트 안에 setting이라는 변수를 만들어 안에 옵션을 선택할 수 있습니다.

더 자세한 옵션은 링크에서 확인 하실 수 있습니다.

 

https://react-slick.neostack.com/docs/api/

Neostack

커스텀 마이징하기

 

설치한 폴더에 

 

node_modules\slick-carousel\slick\slick.css

node_modules\slick-carousel\slick\slick-theme.css

에서 css파일을 수정해주면 자신에게 맞게 수정할 수 있습니다.