react-responsive-slide v0.1.97
설치
npm i react-responsive-slide
주요 기능
커스텀은 크게 안되지만 나름 간단하게 컴포넌트로 생성할 수 있는 반응형 슬라이더입니다.
여기서 말하는 반응형은 한 페이지당 표시되는 슬라이드 아이템 수가 컨테이너의 사이즈에 따라 가변함을 의미합니다.
드래그도 됩니다. 멋지죠?
아래 링크에서 간단하게 테스트 해볼 수 있습니다.
https://react-responsive-slide.vercel.app/
사용 방법
- 패키지 설치 후
<Slide>
컴포넌트를 불러옵니다.
import Slide from "react-responsive-slide";
function App() {
return <Slide></Slide>;
}
<Slide>
를 부모 요소(컨테이너)로 감싸고 그 레퍼런스를 생성해<Slide>
컴포넌트의 Prop으로 전달합니다.
컨테이너는 반응형의 기준으로 사용됩니다. 컨테이너의 너비에 꼭 신경써 주세요.
import { useRef } from "react";
import Slide from "react-responsive-slide";
function App() {
const containerRef = useRef<HTMLDivElement>(null);
return (
<div ref={containerRef}>
<Slide slideContainer={containerRef}></Slide>
</div>
);
}
<Slide>
컴포넌트의 자식으로 슬라이드 아이템들을 넣어주면 구현 완료입니다.<Slide>
의 prop으로 슬라이드를 커스텀하거나 컨테이너와 아이템의 스타일을 선언하여 원하는대로 꾸며보세요.
import { useRef } from "react";
import Slide from "react-responsive-slide";
function App() {
const containerRef = useRef<HTMLDivElement>(null);
return (
<div
ref={containerRef}
style={{ maxWidth: "90vw", backgroundColor: "blue" }}
>
<Slide slideContainer={containerRef}>
<div style={{ height: "100px", color: "red" }}>1번 슬라이드</div>
<div>2번 슬라이드</div>
<div>3번 슬라이드</div>
<div>4번 슬라이드</div>
<div>5번 슬라이드</div>
<div>6번 슬라이드</div>
</Slide>
</div>
);
}
파라미터를 이용한 커스텀
구체적이고 다양하지는 않지만 어느정도 쓸만한 커스텀 기능을 갖고 있습니다.
다양한 파라미터를 <Slide>
컴포넌트에 전달하여 슬라이드를 커스텀할 수 있습니다.
특히 itemRatio
의 기본값은 auto
지만 다양한 반응형 환경에서 아이템이 자연스러운 사이즈를 유지할 수 있도록 적당한 값을 적용하는 것이 좋습니다.
1. responsives
컨테이너의 사이즈에 맞춰 페이지당 슬라이드 아이템의 개수를 설정할 수 있습니다.
따로 설정하지 않아도 반응형이 작동하지만 사이즈에 따른 개수를 직접 지정하고 싶은 경우 사용할 수 있습니다.
responsives={[
{ range: { from: null, to: 500 }, itemsPerPage: 1 },
{ range: { from: 501, to: 900 }, itemsPerPage: 3 },
{ range: { from: 901, to: 1300 }, itemsPerPage: 4 },
{ range: { from: 1301, to: null }, itemsPerPage: 5 },
]}
2. defaultItemsPerPage
기본값으로 사용할 페이지당 슬라이드 아이템 개수입니다.
컨테이너의 사이즈가 responsives
로 전달한 범위 어디에도 속하지 않을 경우와 초기값으로 사용됩니다.
기본값은 2
입니다.
defaultItemsPerPage={2}
3. itemPaddingX
슬라이드 아이템 사이의 간격입니다. 단위는 px입니다.
기본값은 12
입니다.
4. itemRatio
슬라이드 아이템의 가로세로 비율입니다. css aspect-ratio의 값을 사용됩니다.
기본값은 auto
입니다.
itemRatio = "4/3";
5. alignItems
아이템들의 세로 정렬 기준입니다. 아이템들의 높이가 다를 때 컨테이너보다 높이가 작은 아이템의 정렬 위치를 정할 수 있습니다. 유효값은 "center" | "start" | "end"
입니다.
기본값은 center
입니다.
alignItems = "center";
6. containerPaddingX
슬라이드 컨테이너의 좌우 여백입니다. 단위는 px입니다.
기본값은 55
입니다.
containerPaddingX={55}
7. containerPaddingY
슬라이드 컨테이너의 상하 여백입니다. 단위는 px입니다.
기본값은 20
입니다.
containerPaddingY={20}
8. autoSlide
슬라이드가 자동으로 움직일지 여부를 결정합니다.
기본값은 false
입니다.
autoSlide={12}
9. autoSlideInterval
슬라이드가 자동으로 움직이는 시간 간격을 결정합니다. 단위는 ms입니다.
기본값은 3000
입니다.
autoSlideInterval={3000}
10. draggable
터치와 드래그로 슬라이드를 이동할 수 있는지 여부를 결정합니다.
기본값은 true
입니다.
draggable={true}
11. color
테마 색상입니다. 네비게이션과 페이지네이션의 색상을 결정합니다. css가 이해할 수 있는 모든 색상값을 지원합니다.
기본값은 gray
입니다.
color = "gray";
12. navSize
네비게이션 버튼의 크기를 조절합니다. 단위는 px입니다.
기본값은 40
입니다.
navSize={40};
13. navBackground
네비게이션 버튼의 배경 색상을 설정합니다. css Background 값으로 사용됩니다. none
으로 배경을 없앨 수 있습니다.
기본값은 none
입니다.
navBackground = "white";
14. pagination
페이지네이션을 표시할지 여부를 결정합니다.
기본값은 true
입니다.
pagination={true};
15. clickablePagination
페이지네이션을 클릭하여 페이지를 이동할 수 있는지를 결정합니다.
기본값은 true
입니다.
clickablePagination={true};
유의 사항
컨테이너가 슬라이드의 반응형 기준이 되기 때문에 컨테이너가 항상 적절한 너비를 유지할 수 있도록 신경써 주세요.
예시
import React, { useRef } from "react";
import Slide from "react-responsive-slide";
function App() {
const containerRef = useRef<HTMLDivElement>(null);
return (
<div className="App">
<div
ref={containerRef}
style={{
width: "90vw",
margin: "auto",
maxWidth: "1500px",
minWidth: "350px",
}}
>
<Slide
slideContainer={containerRef}
responsives={[
{ range: { from: null, to: 500 }, itemsPerPage: 1 },
{ range: { from: 501, to: 900 }, itemsPerPage: 3 },
{ range: { from: 901, to: 1300 }, itemsPerPage: 4 },
{ range: { from: 1301, to: null }, itemsPerPage: 5 },
]}
defaultItemsPerPage={2}
itemPaddingX={55}
itemRatio="4/3"
alignItems="center"
containerPaddingX={55}
containerPaddingY={55}
autoSlide={true}
autoSlideInterval={3000}
draggable={true}
color="firebrick"
navSize={40}
navBackground="white"
navOpacity={0.8}
pagination={true}
clickablePagination={true}
>
<div style={{ height: "100px", backgroundColor: "red" }}>0</div>
<div style={{ height: "100px", backgroundColor: "red" }}>1</div>
<div style={{ height: "100px", backgroundColor: "red" }}>2</div>
<div style={{ height: "100px", backgroundColor: "red" }}>3</div>
<div style={{ height: "100px", backgroundColor: "red" }}>4</div>
<div style={{ height: "100px", backgroundColor: "red" }}>6</div>
<div style={{ height: "100px", backgroundColor: "red" }}>7</div>
<div style={{ height: "100px", backgroundColor: "red" }}>8</div>
<div style={{ height: "100px", backgroundColor: "red" }}>9</div>
</Slide>
</div>
</div>
);
}
export default App;
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago