Usage

Install the package:

npm i react-touch-drag-slider

The slider renders whatever elements you pass as children — <img> tags, cards, or your own components — each becoming a draggable slide.

import Slider from 'react-touch-drag-slider'

const images = [
  { title: 'Mountains', url: 'https://example.com/mountains.jpg' },
  { title: 'Forest', url: 'https://example.com/forest.jpg' },
]

function App() {
  return (
    <Slider activeIndex={0} threshold={100} spring>
      {images.map(({ title, url }) => (
        <img src={url} key={title} alt={title} />
      ))}
    </Slider>
  )
}

export default App

With spring, slides settle with spring physics instead of a CSS transition, so transition is ignored. The spring’s feel is tuned with stiffness, damping, and mass. Leave spring off to use the CSS transition, controlled by transition.

Sizing

The slider fills its parent container and measures it on first render, so wrap it in an element with an explicit width and height:

<div className="h-80 w-full overflow-hidden">
  <Slider>
    ...
  </Slider>
</div>

Resizing the window is handled automatically.