react-nice-carousel

simple but useful carousel for react

Install

npm install --save react-nice-carousel

Usage

import React from 'react'
import { ReactNiceCarousel } from 'react-nice-carousel'

const App = () => {
  return (
    <>
      <ReactNiceCarousel
        slides={[
          'https://picsum.photos/600/400',
          'http://lorempixel.com/600/400/',
          'https://picsum.photos/600/400'
        ]} // array of images urls
        scrollDirection='yAxis' // xAxis , yAxis
        carouselBoxHeight={400} // image height and this must be the same
        carouselBoxWidth={600} // image width and this must be the same
        carouselNavButtonsPosition={'top'} // top , right , bottom , left
        carouselNavButtonsType={'number'} // dash , number
        uniquePostfix='a' // should be unique for each instance
      />
    </>
  )
}

Known Issues :

doesn't work as you expect on iPhone

Inspired By :

https://codepen.io/chriscoyier/pen/XwbNwX

License

MIT © alithecodeguy