📖
Update |
🔍 How To Use
import { } from "mcm-js";
export default function ExamplePage() {
return (
);
}📝 Example
기본 (Basic)
return (
);애니메이션 (Animation)
return (
);페이지네이션 (Pagination) & 현재 페이지 (Current-Page)
return (
useAnimation={true}
); return (
useAnimation={true}
);전환 버튼 설정
return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
useSwipeMode={true || { sideMovePercent: 50 }}
); return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
useSwipeMode={true || { sideMovePercent: 50 }}
); return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
useSwipeMode={true || { sideMovePercent: 50 }}
);자동 전환(Autoplay) 및 타이머 적용
return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
); return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
);스와이프 기능 적용
return (
useAnimation={true}
);시작 페이지 지정
return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
);최소 높이값 지정
return (
useAnimation={true}
usePagination={true || { hideMobile: false }}
);페이지 전환 시 이벤트 발생
// 현재 페이지의 인덱스 값을 저장합니다.
const [idx, setIdx] = useState(0);
// 페이지 전환 이벤트로 받아온 인덱스 값을 변경합니다.
const changeEvent = (idx) => {
setIdx(idx);
};
return (
<div>
<p> 현재 페이지의 인덱스 번호는? {idx} </p>
<Slider
useAnimation={true}
usePagination={true || { hideMobile: false }}
useAutoPlay={true || { delay: 3000 }}
>
<p> Hello </p>
<p> 😃🧑😀 </p>
<img src="이미지 주소" />
</Slider>
</div>
);다음 및 이전 페이지 이동 방지
return (
useAnimation={true}
useSwipeMode={true || { sideMovePercent: 50 }}
usePagination={true || { hideMobile: false }}
useAutoPlay={{ delay: 3000, showTimer: true }}
);❗ 모듈 호출시 에러 발생 예시
📤 Props List
필수 Props
| 이름 | 설명 | 기본값 (Type) |
| children | Slider에 적용할 나열되는 컴포넌트들을 나타냅니다. children props에 직접 데이터를 전달한다면 반드시 배열에 담아야 합니다. | [ ] ([Node]) |
| id | 모듈에 id 선택자 값을 지정합니다. id는 wrapper 태그에 적용됩니다. | "" (String) |
| className | 모듈에 class 선택자 값을 지정합니다. className은 wrapper 태그에 적용됩니다. | "" (String) |
| useAnimation | true를 전달하면 페이지 전환시 애니메이션 효과를 적용합니다. | false (Boolean) |
| usePagination | 나열되어 있는 컴포넌트의 개수만큼 페이지의 개수를 리스트 형태로 출력합니다. 출력된 리스트내의 페이지를 클릭해서 페이지를 전환할 수 있습니다.
| false | { hideMobile : false } (Boolean | Object) |
| useCurrentPage | 현재 페이지의 번호와 전체 페이지의 개수의 정보를 노출합니다.
| false | { hideMobile : false } (Boolean | Object) |
| setArrow | 좌, 우로 이동할 수 있는 버튼에 대한 여러 기능을 제어할 수 있습니다
| { hide : false, showHover : false, hideMobile : false, contents : { left : "◀", right : "▶" } } (Object) |
| useAutoPlay | Slider의 자동전환 기능을 제어합니다.
| false | { delay: 3000, showTimer: false } (Object) |
| useSwipeMode | 스와이프 기능을 사용할 수 있습니다.
| false | { sideMovePercent : 10~90 } (Object) |
| firstPage | 제일 먼저 노출시킬 페이지의 번호를 입력하면 해당 페이지를 먼저 노출할 수 있습니다. 페이지의 번호는 앞에서부터 1번부터 컴포넌트의 개수까지 입력이 가능합니다. | 1 (Number) |
| listMinHeight | Slider의 web(768px 이상), mobile(767px 이하) 환경의 최소 높이를 지정할 수 있습니다. | { web : "0px", mobile : "0px" } (Object) |
| changePageEvent | Slider의 페이지가 변경이 되면 실행될 이벤트를 설정합니다. 설정된 이벤트에는 선택되어 있는 리스트의 인덱스 값을 반환하는 props가 제공됩니다. | (idx) => {} (Function) |
| stopInfinite | Slider 페이지가 처음 및 마지막 페이지일 경우 이전/다음 페이지 이동을 비활성화 합니다. 스와이프 및 자동/수동 전환 기능에 모두 적용됩니다. | false (Boolean) |
📂 Module Tree
태그를 클릭해보세요.