react-touch-swiper

Touch and drag slider 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

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 ..) |

License

MIT © 2023 Hamdan-KT