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

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