Accessible Performant Carousel For React – Slider Moon

Description:

A lightweight, accessible, high-performance carousel slider component for React.js.

How to use it:

1. Install and import the slider-moon.

# Yarn
$ yarn add slider-moon
# NPM
$ npm i slider-moon

import Slider from 'slider-moon';
import 'slider-moon/dist/style.css'

2. Add the slider component to the app.

<Slider
  slideClass={'my-slider'}
  infinite={true}
  bullets={true}
  arrowsNav={true}
  animation={'scale'}
  callback={() => {
    console.log('here');
  }}
>
  <div className='slider my-slider'>
    <ul className='slider-wrapper'>
      {items.map((item) => (
        <li key={item}>
          <img src={yourImage} />
        </li>
      ))}
    </ul>
  </div>
</Slider>

Preview: