Demo [Source]

React-soft-slider is a minimally-featured carousel. It focuses on providing the best user experience for manipulating slides. It doesn't try to implement additional features such as pagination dots, next and previous buttons, autoplay. If you're looking for a slider that has all this, there's plenty of alternatives out there.

This allows react-soft-slider to be highly impartial when it comes to styling, so you shouldn't be fighting too hard to making the slider slider look the way you want.

• Touch-gesture compatible: handles swipe and drag on mobile and desktop devices
• Spring animations: driven by high-performance springs
• Impartial styling: you are responsible for the styling of your slides
• Fully responsive: as long as your slides styling is responsive as well!
• Dynamic number of slides: you can add or remove slides on the fly

React-soft-slider is powered by react-spring for springs animation and react-use-gesture for handling the drag gesture.

npm install react-soft-slider

<Slider /> has a very limited logic, and essentially does two things:

1. it positions the slider to the slide matching the index you passed as a prop
2. when the user changes the slide, it will then fire onIndexChange that will pass you the new index. You will usually respond by updating the slider index prop:

import { Slider } from 'react-soft-slider'

const slides = ['red', 'blue', 'yellow', 'orange']
const style = { width: 300, height: '100%', margin: '0 10px' }

function App() {
  const [index, setIndex] = React.useState(0)

  return (
    <Slider index={index} onIndexChange={setIndex} style={{ width: 400, height: 200 }}>
      {slides.map((color, i) => (
        <div key={i} style={{ ...style, background: color }} />
      ))}
    </Slider>
  )
}

As you can see from the example, any child of the <Slider /> component is considered as a slide. You are fully responsible for the appearance of the slides, and each slide can be styled independently.

Note: although the above example uses hooks, react-soft-slider is compatible with Class-based components. However, since it internally uses hooks, it requires React 16.8+.

The <Slider /> component accepts the following props:

React-soft-slider uses two springs, one for the dragged slide, and one for the other slides, that you can configure to your liking. It accepts any options supported by react-spring, including durations if you're not happy with how springs feel see here for more info.

Sizing your slides relatively to the slider

If you want to size your slides relatively to the slider width (let's say width: 80%), you'll need to rely on slideStyle set to {{ minWidth: '80%' }} and styling your slide with width set to100%. The same logic applies for height when in vertical sliding mode.

Don't use transform styling in slideStyle

React-soft-slider uses the transform attribute to make slides move so transform attributes in slideStyle will get overriden.

React-soft-slider is open to suggestions!

React-soft-slider will probably never include slider peripheral features, but is open to suggestions to make handling your slides easier!