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:

npm i react-perfect-slider

Import Slider component and necessary styles:

import Slider from 'react-perfect-slider';

Just pass all slides as children and add necessary controls:

<Slider renderControls={(next, previous) => [
    <button onClick={previous}>Previous</button>,
    <button onClick={next}>Next</button>
]}>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</Slider>

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

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:

<Slider renderControls={(next, previous) => [
    <button onClick={previous}>Previous</button>,
    <button onClick={next}>Next</button>
]} />

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.