[React] React-slick 캐러셀 구현 모듈

✅ React Slick이란?

react-slick은 리액트 프로젝트에서 캐러셀을 구현하기 쉽게 도와주는 모듈이다. 

여기서 캐러셀이란, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법을 말한다.

 

✅ 설치 방법 및 적용

npm install react-slick

// TypeScript일 경우
npm install --save @types/react-slick

 

 그 후, 내장되어 있는 css 설치하기

npm install slick-carousel

// TypeScript일 경우
npm install --save @types/slick-carousel

 

마지막으로 사용할 컴포넌트 부분에 import 해주면 끝!

이걸 안 해주면 적용이 이상하게 된다... 몇 시간 동안 고생해서 해결

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

 

✅  Slick 사용하기

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>
    );
  }
}

Neostack

 

✅ Slick API 설정들

slick api를 사용할 때, 아래와 같은 설정들을 활용하면 쉽게 원하는 형식을 만들 수 있다!

const setting ={
	slide: 'div',		//슬라이드 되어야 할 태그 ex) div, li 
	infinite : true, 	//무한 반복 옵션	 
	slidesToShow : 4,		// 한 화면에 보여질 컨텐츠 개수
	slidesToScroll : 1,		//스크롤 한번에 움직일 컨텐츠 개수
	speed : 100,	 // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
	arrows : true, 		// 옆으로 이동하는 화살표 표시 여부
	dots : true, 		// 스크롤바 아래 점으로 페이지네이션 여부
	autoplay : true,			// 자동 스크롤 사용 여부
	autoplaySpeed : 10000, 		// 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
	pauseOnHover : true,		// 슬라이드 이동	시 마우스 호버하면 슬라이더 멈추게 설정
	vertical : false,		// 세로 방향 슬라이드 옵션
	prevArrow : "<button type='button' class='slick-prev'>Previous</button>",		// 이전 화살표 모양 설정
	nextArrow : "<button type='button' class='slick-next'>Next</button>",		// 다음 화살표 모양 설정
	dotsClass : "slick-dots", 	//아래 나오는 페이지네이션(점) css class 지정
	draggable : true, 	//드래그 가능 여부 
	
	responsive: [ // 반응형 웹 구현 옵션
		{  
			breakpoint: 960, //화면 사이즈 960px일 때
			settings: {
				//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
				slidesToShow:3 
			} 
		},
		{ 
			breakpoint: 768, //화면 사이즈 768px일 때
			settings: {	
				//위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
				slidesToShow:2 
			} 
		}
	]
}

 

✅ Slick API 설정들

slider 태그 안에 있는 태그들은 .slice-slice 뒤에 사용해야 css를 줄 수 있다.

body {
  background-color: #05486e;
}

.container {
  width: 90%;
  height: 500px;
  margin: 5%;
}

.slick-slide {
  height: 320px;
  border: 20px solid #05486e;
  box-sizing: border-box;
}

.slick-slide img {
  object-fit: cover;
  height: 500px;
  width: 100%;
  box-sizing: border-box;
}