간단한 회전식 스타일 이미지 '슬라이더' 

https://github.com/farbenmeer/react-spring-slider 

https://farbenmeer.github.io/react-spring-slider/?path=/story/slider--default 

후드 아래에서 React 스프링을 사용하는 슬라이더입니다.

이 프로젝트는 구성을 통해 유연 할 뿐만 아니라 제정되고 합리적인 기본값으로 쉽게 사용할 수 있도록 합니다.

farbenmeer.github.io/react-spring-slider에서 스토리 북 내에서 이것이 어떻게 사용될 수 있는지 실제로 확인할 수 있습니다.

설치 

yarn add @farbenmeer/react-spring-slider
// OR
npm install --save @farbenmeer/react-spring-slider

용법 

이 모듈은 사용자 컴포넌트에서 가져오고 사용할 수 있는 기본 내보내기를 제공합니다.

import Slider from '@farbenmeer/react-spring-slider';

const App = () => {
	return (
		<Slider>
			<div>child 1</div>
			<div>child 2</div>
			<div>child 3</div>
		</Slider>
	)
}

React 노드가 있는 한 슬라이더를 통해 자식을 얻을 수 있으므로 이미지, 텍스트 또는 보다 복잡한 구성 요소를 표시 할 수 있습니다.

패키지에 형식 정의가 포함되어 있으므로 Typescript를 사용할 수도 있습니다.

더 많은 예 

Custom bulletStyle 

<Slider hasBullets bulletStyle={{backgroundColor: '#fff'}}>
	<MySlide />
	<MySlide />
	<MySlide />
</Slider>

Fully customized 

import Slider from '@farbenmeer/react-spring-slider';

const App = () => {
	const onSlideChange = index => console.log(`changed to slide ${index}`);

	const BulletComponent = ({onClick, isActive}) => (
		<li
			style={{
				width: '25px',
				height: '25px',
				backgroundColor: 'red',
				margin: '0 2px',
				opacity: isActive && '0.5'
			}}
			onClick={onClick}
		/>
	);

	BulletComponent.propTypes = {
		onClick: PropTypes.func.isRequired,
		isActive: PropTypes.bool.isRequired
	};

	const ArrowComponent = ({onClick, direction}) => {
		return (
			<div
				style={{
					border: '1px solid black',
					padding: '1em',
					backgroundColor: 'white'
				}}
				onClick={onClick}
			>
				{direction}
			</div>
		);
	};

	ArrowComponent.propTypes = {
		onClick: PropTypes.func.isRequired,
		direction: PropTypes.string.isRequired
	};


	return (
		<Slider 
			activeIndex={2} 
			auto 
			hasBullets 
			BulletComponent={BulletComponent}
			ArrowComponent={ArrowComponent}
			onSlideChange={onSlideChange}
			>
				<div>child 1</div>
				<div>child 2</div>
				<div>child 3</div>
		</Slider>
	)
}

더 많은 예제를 보려면 스토리 북을 살펴보십시오.