반응형
0. 들어가면서
웹사이트를 만들다 보면 필연적으로 만나는 기능 중 하나인 Slide!
요즘은 워낙 고수분들이 가공하여 배포를 해줘서 npm에서 검색을 하면 웬만한 기능은 사용이 가능하다.
그런데 react-slick이라는 좋은 Slide가 사용에 대해서 조금 불편한 점이 있어 그 부분 정리하는 김에 같이 정리하였다.
물론 내가 Document를 못 찾는 걸 수 있다....
1. 공통
react-slick은 기본적으로 <Slide> 태그 안에서 슬라이드 별 필요한 옵션을 넣어 사용한다.
또 본문에 SlideContainer, SlidePage 같은 태그가 있을 건데, 그건 styled-component를 사용해서 기본적인 디자인을
넣었다.
추가로 기본적으로 제공하는 css 스타일을 적용하기 위해서 두 가지 css 파일을 import 해야 한다.
yarn add slick-carousel
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
최상위 App.js에 추가해도 되고, 아니면 Slide에 import 해주면 된다.
2. SingleSlide
가장 기본적은 Slide이다. 그러므로 자동재생, custom Arrow 같은 옵션을 추가로 설명한다.
import React from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";
const SampleNextArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
};
const SamplePrevArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "green" }}
onClick={onClick}
/>
);
};
const SingleSlide = ({}) => {
const settings = {
dots: true,
infinite: true,
autoplay: true,
// 슬라이드 변경 시간
speed: 2000,
// 자동 재생 유지 시간
autoplaySpeed: 2000,
cssEase: "linear",
centerMode: true,
slidesToShow: 1,
slidesToScroll: 1,
nextArrow: <SampleNextArrow />,
prevArrow: <SamplePrevArrow />,
};
return (
<SlideContainer>
<h1>SingleSlide</h1>
<Slider {...settings}>
<SlidePage padding={`50px 0`}>1</SlidePage>
<SlidePage padding={`50px 0`}>2</SlidePage>
<SlidePage padding={`50px 0`}>3</SlidePage>
<SlidePage padding={`50px 0`}>4</SlidePage>
<SlidePage padding={`50px 0`}>5</SlidePage>
<SlidePage padding={`50px 0`}>6</SlidePage>
<SlidePage padding={`50px 0`}>7</SlidePage>
</Slider>
</SlideContainer>
);
};
export default SingleSlide;
settings 옵션
- dots : 슬라이드 아래에 dot를 on/off 할 수 있는 옵션
- infinite : 슬라이드가 끝까지 갔을때, 다음을 누를 경우 처음 슬라이드가 나온다.
- speed : 슬라이드가 변경될 때 걸리는 시간
- autoplay : 자동 재생을 on/off할 수 있는 옵션
- autoplaySpeed : 자동 재생으로 슬라이드가 넘어가는 주기
- slidesToShow : 한번에 보이는 슬라이드의 개수
- slidesToScroll : 한번 이동할 때 넘어가는 슬라이드 개수
- nextArrow, prevArrow : 이전, 다음 화살표를 커스텀할 수 있다. 이 부분은 아래에 더 깊게 설명
nextArrow, prevArrow
이전, 다음 화살표를 커스텀할 수 있는 옵션이다.
const SampleNextArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "red" }}
onClick={onClick}
/>
);
};
const SamplePrevArrow = (props) => {
const { className, style, onClick } = props;
return (
<div
className={className}
style={{ ...style, display: "block", background: "green" }}
onClick={onClick}
/>
);
};react-slick이 props를 통해 className, style, onClick을 받은 다음 원하는 디자인의 화살표를 만들 수 있다.
컴포넌트 형식으로 만든 다음 settings 옵션에 넣어주면 화면에 나온다.
3. MultipleRowSlide
생각보다 많이 사용되는 MultipleRowSlide이다.
import React from "react";
import Slider from "react-slick";
import { MultiItem, SlideContainer, SlidePage } from "../styles";
const MultipleSlide = () => {
const settings = {
className: "center",
centerMode: true,
infinite: true,
centerPadding: "100px",
slidesToShow: 3,
speed: 500,
rows: 2,
slidesPerRow: 2,
};
return (
<SlideContainer>
<h1>MultipleRowSlide</h1>
<Slider {...settings}>
<SlidePage>
<MultiItem>1</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>2</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>3</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>4</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>5</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>6</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>7</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>8</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>9</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>10</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>11</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>12</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>13</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>14</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>15</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>16</MultiItem>
</SlidePage>
</Slider>
</SlideContainer>
);
};
export default MultipleSlide;settings 옵션
- rows : 몇 줄짜리 슬라이드를 만들지 결정할 수 있다.
- slidesPerRow : 한 슬라이드에 몇 개를 나타낼지 정할 수 있다.
=> 만약 rows : 2, slidePerRow : 2 경우 한 슬라이드는 4개의 item으로 구성된다.
4. CenterSlide
슬라이드가 가운데서부터 시작되는 슬라이드!
import React from "react";
import Slider from "react-slick";
import { MultiItem, SlideContainer, SlidePage } from "../styles";
const CenterSlide = () => {
const settings = {
className: "center",
centerMode: true,
infinite: true,
centerPadding: "60px",
slidesToShow: 3,
speed: 500,
};
return (
<SlideContainer>
<h1>CenterSlide</h1>
<Slider {...settings}>
<SlidePage>
<MultiItem>1</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>2</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>3</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>4</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>5</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>6</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>7</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>8</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>9</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>10</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>11</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>12</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>13</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>14</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>15</MultiItem>
</SlidePage>
<SlidePage>
<MultiItem>16</MultiItem>
</SlidePage>
</Slider>
</SlideContainer>
);
};
export default CenterSlide;settings 옵션
- centerMode : centerMode를 on/off 할 수 있는 옵션
- centerPadding : centerMode를 할 경우 좌우 여백을 얼마나 줄 것인지 결정
( 이 옵션을 통해 다음, 이전 슬라이드가 부분적으로 보인다. )
특이사항
위 내용만 사용하면 centerMode의 가운데 슬라이드가 강조하는 등의 설정이 안 된다.
해당 부분은 추가로 css 옵션을 줘야 한다. ( 사실상 이 부분 때문에 정리하였다, 나같이 찾아다니는 사람이 없길... )
export const MultiItem = styled.div`
color: #e67e22;
opacity: 1;
transform: scale(1.04);
`;
export const SlideContainer = styled.div`
padding: 0 20px;
/* width 옵션으로 전체 width 값을 지정할 수 있음 */
/* width: 500px; */
.center .slick-center ${MultiItem} {
/* center 모드일때 center에게 강조할 경우 사용 */
color: #e67e22;
opacity: 1;
transform: scale(1.06);
}
.center ${MultiItem} {
/* center 모드일때 center 외 속성에게 사용 */
opacity: 0.8;
transition: all 300ms ease;
transform: scale(0.99);
}
`;
export const SlidePage = styled.div`
text-align: center;
background-color: skyblue;
padding: ${(props) => props.padding};
${MultiItem} {
/* center 옵션의 경우 MultiTem 속성을 추가로 사용해서 내부 옵션을 추가로 줘야함 */
background: #00558b;
color: #fff;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
}
`;styled-component를 사용해서 커스텀했는데,
. center .slick-center ${MultiItem} {
/* center 모드일 때 center에게 강조할 경우 사용 */
color: #e67e22;
opacity: 1;
transform: scale(1.06);
}
실제 center 슬라이드에게 주고 싶은 경우 넣어주면 된다.
${MultiItem} {
/* center 옵션의 경우 MultiTem 속성을 추가로 사용해서 내부 옵션을 추가로 줘야 함 */
background: #00558b;
color: #fff;
font-size: 36px;
line-height: 100px;
margin: 10px;
padding: 2%;
position: relative;
text-align: center;
opacity: 0.8;
transition: all 300ms ease;
transform: scale(0.99);
}
center 슬라이드 외 다른 슬라이드에게 차별점을 주고 싶을 경우 넣어준다.
5. VariableWidthSlide
width 값을 자유롭게 변경할 수 있는 슬라이드!
import React from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";
const VariableWidthSlide = ({}) => {
const settings = {
dots: true,
infinite: true,
centerMode: true,
slidesToScroll: 1,
variableWidth: true,
};
return (
<SlideContainer>
<h1>VariableWidthSlide</h1>
<Slider {...settings}>
<SlidePage style={{ width: 100 }} padding={`50px 0`}>
100
</SlidePage>
<SlidePage style={{ width: 400 }} padding={`50px 0`}>
400
</SlidePage>
<SlidePage style={{ width: 700 }} padding={`50px 0`}>
700
</SlidePage>
<SlidePage style={{ width: 200 }} padding={`50px 0`}>
200
</SlidePage>
<SlidePage style={{ width: 500 }} padding={`50px 0`}>
500
</SlidePage>
<SlidePage style={{ width: 300 }} padding={`50px 0`}>
300
</SlidePage>
<SlidePage style={{ width: 1000 }} padding={`50px 0`}>
1000
</SlidePage>
</Slider>
</SlideContainer>
);
};
export default VariableWidthSlide;settings 옵션
variableWidth : width 값 자유도를 on/off로 설정할 수 있다.
6. VerticalModeSlide
좌우 슬라이드가 아닌 위아래 슬라이드로 변경한 슬라이드
import React from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";
const VerticalModeSlide = ({}) => {
const settings = {
dots: true,
infinite: true,
cssEase: "linear",
slidesToShow: 3,
slidesToScroll: 1,
vertical: true,
};
return (
<SlideContainer>
<h1>VerticalModeSlide</h1>
<Slider {...settings}>
<SlidePage padding={`50px 0`}>1</SlidePage>
<SlidePage padding={`50px 0`}>2</SlidePage>
<SlidePage padding={`50px 0`}>3</SlidePage>
<SlidePage padding={`50px 0`}>4</SlidePage>
<SlidePage padding={`50px 0`}>5</SlidePage>
<SlidePage padding={`50px 0`}>6</SlidePage>
<SlidePage padding={`50px 0`}>7</SlidePage>
</Slider>
</SlideContainer>
);
};
export default VerticalModeSlide;settings 옵션
vertical : vertical 모드를 on/off 할 수 있는 옵션
7. Gallery Slide
위에 메인 슬라이드가 있고 아래에 서브 슬라이드가 있는 형식이다.
react slick에서는asNavFor이라는 명칭으로 지정되어있다.
import React, { useState } from "react";
import Slider from "react-slick";
import { SlideContainer, SlidePage } from "../styles";
const GallerySlide = () => {
const [mainSlide, setMainSlide] = useState();
const [subSlide, setSubSlide] = useState();
return (
<SlideContainer>
<h1>GallerySlide</h1>
<Slider asNavFor={subSlide} ref={(slider) => setMainSlide(slider)}>
<SlidePage padding={`50px 0`}>1</SlidePage>
<SlidePage padding={`50px 0`}>2</SlidePage>
<SlidePage padding={`50px 0`}>3</SlidePage>
<SlidePage padding={`50px 0`}>4</SlidePage>
<SlidePage padding={`50px 0`}>5</SlidePage>
<SlidePage padding={`50px 0`}>6</SlidePage>
<SlidePage padding={`50px 0`}>7</SlidePage>
</Slider>
<Slider
asNavFor={mainSlide}
ref={(slider) => setSubSlide(slider)}
slidesToShow={3}
focusOnSelect={true}
>
<SlidePage padding={`50px 0`}>1</SlidePage>
<SlidePage padding={`50px 0`}>2</SlidePage>
<SlidePage padding={`50px 0`}>3</SlidePage>
<SlidePage padding={`50px 0`}>4</SlidePage>
<SlidePage padding={`50px 0`}>5</SlidePage>
<SlidePage padding={`50px 0`}>6</SlidePage>
<SlidePage padding={`50px 0`}>7</SlidePage>
</Slider>
</SlideContainer>
);
};
export default GallerySlide;settings 옵션
asNavFor : 각자 바라보고 있는 Slide의 ref를 넣어주면 슬라이드 이동 시 같이 이동된다.
반응형
'React > Npm' 카테고리의 다른 글
| [React] npm 배포 시 문제 (0) | 2023.03.26 |
|---|---|
| [NPM] React SNS Login 패키지 만들기 (1) | 2022.03.30 |