https://github.com/artemtam/react-perfect-slider
🛝 Efficient, simple, and perfectly designed carousel/slider component on pure React
https://github.com/artemtam/react-perfect-slider
carousel react react-component slider slider-component typescript
Last synced: 5 months ago
JSON representation
🛝 Efficient, simple, and perfectly designed carousel/slider component on pure React
- Host: GitHub
- URL: https://github.com/artemtam/react-perfect-slider
- Owner: artemtam
- License: mit
- Created: 2020-01-08T16:02:00.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-11-25T12:39:14.000Z (8 months ago)
- Last Synced: 2025-11-28T17:29:04.327Z (8 months ago)
- Topics: carousel, react, react-component, slider, slider-component, typescript
- Language: TypeScript
- Homepage:
- Size: 2.05 MB
- Stars: 7
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-perfect-slider  [](https://coveralls.io/github/artemtam/react-perfect-slider)
High-efficient and perfectly designed carousel/slider component.
## Features
- Simple, clean, not over-engineered
- No default styling and controlling components
- Hardware-accelerated transitions with CSS Transform
- Zero-dependencies, React and TypeScript
- Glitchless on mobile devices
## Usage
Add `react-perfect-slider` to your project running the following in your project folder:
```shell script
npm i react-perfect-slider
```
Import Slider component and necessary styles:
```typescript jsx
import Slider from 'react-perfect-slider';
```
Just pass all slides as children and add necessary controls:
```typescript jsx
[
Previous,
Next
]}>
Slide 1
Slide 2
Slide 3
```
## API
The single `Slider` component has the following properties:
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `transitionDuration` | `number` | `1000` | Slide transition duration in milliseconds |
| `transitionFunction` | `string` | `ease` | Slide transition function (ease, ease-in-out, ect.) |
| `autoplay` | `boolean` | `true` | Autoplay mode active |
| `autoplayDuration` | `number` | `5000` | Interval for autoplay iteration |
| `renderControls` | `Function` | `() => null` | Callback is used to render controlling components, such as next and previous buttons, slider indicator dots, etc. More details below |
### renderControls
```typescript jsx
renderControls?: (
next: () => void, // navigate to the next slide
previous: () => void, // navigate to the previous slide
goTo: (slide: number) => void, // navigate to the specified slide
slide: number, // current slide index
total: number, // total number of slides
) => React.ReactNode | React.ReactNodeArray;
```
Use this callback to render all necessary controlling components, such as next/previous arrows, slider indicator dots, etc. For example, to render Next and Previous button write the following:
```typescript jsx
[
Previous,
Next
]} />
```
You can place these components relatively to the Slider container – just make each component's position `absolute`.
## Contribution
There are still some things to implement, such as touch support and accessibility So feel free to contribute to the project, and use issues to share feedback.