import 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

Available Props

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

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

Keywords

FAQs

What is react-touch-drag-slider?

Is react-touch-drag-slider popular?

Is react-touch-drag-slider well maintained?

Last updated on 03 Oct 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket