Slider Moon

A slide plugin for react. The main focus was to build an accessible, high-performance and easy-to-install plugin. Feel free to explore and evolve my plugin.

View Demo View Github

Install

$ npm i slider-moon

or

$ yarn add slider-moon

How to use

import the function Slider and css in your component.

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

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

Options

options can be passed as props to the Slider component. See below for the options and their description.

Name type default description
infinite bolean null determines whether the slider will be infinite when reaching the last item.
bullets bolean null enable clickable bullets under the slider.
arrowsNav bolean null enable arrows for slider navigation.
animation string null name of animation for slider transition.
callback func void function that triggers every time the slider is updated (resize and click to change slide).

Contributing

If you have a pull request that you would like to submit, be sure to update the library version. Feel free to help and evolve the plugin.

License

The code is available under the MIT License.