https://github.com/spoqa/dodo-react-carousel
A simple React carousel component
https://github.com/spoqa/dodo-react-carousel
carousel react
Last synced: 9 months ago
JSON representation
A simple React carousel component
- Host: GitHub
- URL: https://github.com/spoqa/dodo-react-carousel
- Owner: spoqa
- License: other
- Created: 2018-01-16T03:00:24.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-19T09:02:28.000Z (over 8 years ago)
- Last Synced: 2025-09-21T23:56:18.533Z (10 months ago)
- Topics: carousel, react
- Language: TypeScript
- Size: 177 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-APACHE
Awesome Lists containing this project
README
# dodo-react-carousel
A simple React carousel component.
## How to install
```sh
yarn add @spoqa/react-carousel # You can use `npm install --save`
```
## How to use
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from '@spoqa/react-carousel';
import '@spoqa/react-carousel/carousel.css'; // Bundle the CSS
import './main.css';
ReactDOM.render(
Content 1
Content 2
,
document.getElementById('container')
);
```
`main.css`:
```css
.carousel-container {
width: 400px;
height: 300px;
}
```
Note that you should wrap the Carousel with an element that has width and
height.
## Props
* `position`: Sets which slide will be shown. If this is one of the adjacent
slides of the current slide, transition will occur.
* `threshold`: Sets flick threshold.
* `transitionDuration`: Sets the duration of transition, as of
`transition-duration` CSS property.
## Events
* `onDragStart`: Fires when the user clicks or touches the carousel.
* `onDragEnd`: Fires when the user releases the carousel.
* `onPositionChange`: Fires whenever the current slide changes. Current slide
index will be passed.
* `onUnstable`: Fires when the carousel is moving.
* `onStable`: Fires when the carousel finishes transition. Current slide index
will be passed.
---
[MIT] OR [Apache-2.0]. See [COPYRIGHT] for details.
[MIT]: LICENSE-MIT
[Apache-2.0]: LICENSE-APACHE
[COPYRIGHT]: COPYRIGHT