react-touch-drag-slider
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
Install
Usage
Available Props
Prop | Type | Default | Description |
---|---|---|---|
onSlideComplete | (completedIndex) => completedIndex | null | function that gets called when finished |
onSlideStart | (startIndex) => startIndex | null | 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 | pixel value that must be dragged before slide snaps to position |
transition | Number | 0.3 | transition delay in seconds |
scaleOnDrag | Boolean | false | should the individual slide scale while dragging |
Examples
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
License
MIT © [bushblade]