[1027] react slider / 리액트 슬라이드 / react 캐로셀 carousel 만들기

완성본 이미지~ 

 

오늘은 react에서 슬라이드 기능을 쉽게 구현할 수 있는 라이브러리를 사용해보았다.

라이브러리 이름은 React Slick

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

Neostack

 

 

---

 

 

🔆 React Slick

 

1. 우선 설치

 npm install react-slick --save  
 npm install slick-carousel --save

 

2. 기본 css 세팅

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

3. 홈페이지에 나와있는 슬릭의 기본 코드는 class 형으로, 다음과 같다. 

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

 

 

4. 이걸 함수형으로 사용할것이다.

import React, { Component } from "react";
import Slider from "react-slick";

const SimpleSlider = ()=>{

    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    
    return (
    	<Styled_Slide {...settings}>
                <div>
                    <h3>1</h3>
                </div>
                <div>
                    <h3>2</h3>
                </div>
                <div>
                    <h3>3</h3>
                </div>
                <div>
                    <h3>4</h3>
                </div>
                <div>
                    <h3>5</h3>
                </div>
            </Styled_Slide>  
    );
}


export default SimpleSlider

 

 

이외에도 다양한 세팅값이 있는데 ,

  dots: true,  // 슬라이드 밑에 점 보이게
  infinite: true,  // 무한으로 반복
  speed: 500,
  autoplay: true,
  autoplaySpeed: 2000,  // 넘어가는 속도
  slidesToShow: 4,  // 4장씩 보이게
  slidesToScroll: 1,  // 1장씩 뒤로 넘어가게
  centerMode: true,
  centerPadding: '0px',  // 0px 하면 슬라이드 끝쪽 이미지가 안잘림
  
  ** 참고 : https://velog.io/@poew/react-slick-%EC%82%AC%EC%9A%A9%EB%B2%95

 

 

 

5. 추가 커스텀 css를 위한 styled-component 세팅

나같은 경우는 css 파일을 따로 빼서 관리하므로 해당 컴포넌트 경로를 가져와주고

import {Styled_Slide} from "./Thumbnail.css"

 

 

6. 그러고서 css 파일에 세팅을 해줬다. (나는 이걸 해주니 비로소 보였음..)

import Slider from "react-slick";

export const Styled_Slide = styled(Slider)`
	
    .slick-list{ //얘로 크기조정 했음
    	width: 300px;
        height: 400px;
        margin: 0 auto;
        background-color: #f0f9ff;
    }
    
    .slick-prev:before, .slick-next:before{ //얘는 양옆 버튼. 커스텀 해줘야 보임
    	font-family: 'slick';
        font-size: 40px;
        line-height: 1;
        opacity: .75;
        color: #000000;
        -webkit-font-smoothing: antialiased;
    }
`

 

 

 

---------------------------------------------------------------------------------

 

 

💙 React Slick의 장점은

1. 번거로운 과정 없이 슬라이드를 구현할 수 있다는 점!

옵션값으로 밑의 점을 뺸다던지 , 한번에 몇장 넘어가게 할지 등도 쉽게 세팅할 수 있음. (왕초보자인 나도 쉽게했으니)

 

2. 커스텀을 다양하게 할 수 있다는 점도 좋은 것 같다. (어찌보면 단점)

구글에 보면 여러가지 데모가 있던데 이쁜것도 많고 신기한것도 많았음! 

 

다만 그만큼 일일히 내가 css를 만져줘야 해서 번거롭다고 느껴질 수도 있을듯!