react-slider-awesome

the best react carousel

Install

npm install --save react-slider-awesome

Live Demo

Usage

import React from 'react'

import { Slider } from 'react-slider-awesome'

import 'react-slider-awesome/dist/index.css'

const App = () => {
  /* For Right to left set  body{  direction: rtl; }  then rtl={true|false} */
  /* For no item effects  noEffects={true|false} */
  /* Number of items in slide size={small|big} */
  return (
    <Slider rtl={false} noEffects={false} size={'small'}>
      <div>
        <img src={'./path/to/1.jpg'} />
      </div>
      <div>
        <img src={'./path/to/2.jpg'} />
      </div>
      <div>
        <img src={'./path/to/3.jpg'} />
      </div>
      <div>
        <img src={'./path/to/4.jpg'} />
      </div>
      <div>
        <img src={'./path/to/5.jpg'} />
      </div>
      <div>
        <img src={'./path/to/6.jpg'} />
      </div>
      <div>
        <img src={'./path/to/7.jpg'} />
      </div>
      <div>
        <img src={'./path/to/1.jpg'} />
      </div>
      <div>
        <img src={'./path/to/2.jpg'} />
      </div>
      <div>
        <img src={'./path/to/3.jpg'} />
      </div>
      <div>
        <img src={'./path/to/4.jpg'} />
      </div>
      <div>
        <img src={'./path/to/5.jpg'} />
      </div>
      <div>
        <img src={'./path/to/6.jpg'} />
      </div>
      <div>
        <img src={'./path/to/7.jpg'} />
      </div>
    </Slider>
  )
}

export default App

License

MIT © Abdullah Altahery