React-touch-swiper NPM

react-touch-swiper

Touch and drag slider component for React

Slider Gif

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

Install

npm i react-touch-swiper

Usage

import React from 'react'
import { Slider } from 'react-touch-swiper'

// here we are importing some images
// but the Slider children should be an array of node like img
// or your own components

import images from './images'

function App() {
  return (
    <Slider
      onSlideComplete={(event,slideIndex) => {
        console.log('sliding completed', slideIndex)
      }}
      onSlide={(event,slideIndex) => {
        console.log("sliding", slideIndex)
      }}
      onSlideStart={(event,slideIndex) => {
        console.log('sliding started', slideIndex)
      }}
      keyEvent={false}
      controllButton={false}
      activeIndex={0}
      threshHold={100}
      transition={0.3}
      scaleEffect={true}
    >
      {images.map(({ url, title }, index) => (
        <img src={url} key={index} alt={title} />
      ))}
    </Slider>
  )
}

export default App

Available Props

Prop	Type	Default	Description
onSlideComplete	(event: eventObject, completedIndex: number) => void		A function that gets called when sliding completed
onSlideStart	(event: eventObject, startedIndex: number) => void		A function that gets called when sliding started
onSliding	(event: eventObject, currentIndex: number) => void		A function that gets called when sliding
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 its position customise with your value according to size of the window
transition	number	0.3	The transition delay in seconds
scaleEffect	boolean	false	scale effect for individual slides while dragging
keyEvent	boolean	false	Enable arrow key navigation
controllButton	boolean	false	Show control buttons
autoSliding	boolean	false	enable auto sliding based on time interval
autoSlideTimeInterval	number	3000	specific auto sliding time interval in ms
disableDefaultPadding	boolean	false	remove default padding of slide element (0.3rem)
style	object	{}	specific custom style to slider parent component (width, height, etc ..)