Touch and drag slider carousel component for React
- Touch friendly on mobile
- Responsive to viewport resizing
- Supports mouse drag by default
- Simple API
- Sizes to any size parent container
- small bundle size with zero dependencies
npm i react-touch-drag-sliderimport React from 'react'
import Slider from 'react-touch-drag-slider'
// here we are importing some images
// but the Slider children can be an array of any element nodes,
// or your own components
import images from './images'
function App() {
return (
<Slider
onSlideComplete={(i) => {
console.log('finished dragging, current slide is', i)
}}
onSlideStart={(i) => {
console.log('started dragging on slide', i)
}}
activeIndex={0}
threshHold={100}
transition={0.5}
scaleOnDrag={true}
>
{images.map(({ url, title }, index) => (
<img src={url} key={index} alt={title} />
))}
</Slider>
)
}
export default App| Prop | Type | Default | Description |
|---|---|---|---|
| onSlideComplete | (completedIndex: number) => void | A function that gets called when finished | |
| onSlideStart | (startIndex: number) => void | A function that gets called on start | |
| activeIndex | number | 0 | Set to start on this index or use state to update the current index |
| threshHold | number | 100 | A pixel value that must be dragged before slide snaps to position |
| transition | number | 0.3 | The transition delay in seconds |
| scaleOnDrag | boolean | false | Should the individual slide scale while dragging |
Most basic example with no props - CodeSandBox link
With props, local state and buttons (you provide the buttons) - CodeSandbox link
For example of use in a full screen modal with a gallery, please checkout any of the galleries in Bushblade Knives
MIT © bushblade
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent