💡 React Slick이란?
React-slick은 리액트 프로젝트에서 캐러셀을 구현하기 쉽게 도와주는 모듈이다.
여기서 캐러셀이란, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법을 말한다!
💡 설치방법 및 적용
🌱 아래의 코드를 통해 slick을 설치해줍니다!
npm
npm install react-slick --saveyarn
yarn add react-slick
❗❗ TypeScript 라면 아래의 코드로 설치하자 ❗❗
npm install --save @types/react-slick
yarn add react-slick @types/react-slick slick-carousel
🌱 그 후에는 내장되어 있는 css 설치하기
npm
npm install slick-carousel --saveyarn
yarn add 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>
);
}
}💡 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
}
}
]
}💡 <slider> 안에 있는 태그들 css
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;
}🌱 참고자료
