Slide Moon

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

Examples

Default

<Slider
  slideClass={'my-slider'}
  infinite={true}
  bullets={true}
  arrowsNav={true}
>
  <div>
    <div className='slider my-slider'>
      <ul className='slider-wrapper'>
        {items.map((item) => (
          <li key={item}>
            <img src={moon} />
          </li>
        ))}
      </ul>
    </div>
  </div>
</Slider>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Scale Animation

<Slider
  slideClass={'my-scale'}
  infinite={true}
  bullets={true}
  arrowsNav={true}
  animation={'scale'}
>
  <div className='slider my-scale'>
    <ul className='slider-wrapper'>
      {items.map((item) => (
        <li key={item}>
          <img src={moon} />
        </li>
      ))}
    </ul>
  </div>
</Slider>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Grid


//- your style
.slider-grid {
  display: flex;
  justify-content: space-between;
}

//- your component
<Slider
  slideClass={'my-slider-grid'}
  infinite={true}
  bullets={true}
  arrowsNav={true}
>
  <div>
    <div className='slider my-slider-grid'>
      <ul className='slider-wrapper'>
        {items.map((item) => (
          <li key={item} className='slider-grid'>
            <img src={moon} />
            <img src={moon} />
            <img src={moon} />
          </li>
        ))}
      </ul>
    </div>
  </div>
</Slider>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

No Infinite

<Slider
  slideClass={'my-slider-infinite'}
  infinite={false}
  bullets={true}
  arrowsNav={true}
>
  <div>
    <div className='slider my-slider-infinite'>
      <ul className='slider-wrapper'>
        {items.map((item) => (
          <li key={item}>
            <img src={moon} />
          </li>
        ))}
      </ul>
    </div>
  </div>
</Slider>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

Callback

<Slider
  slideClass={'my-slider-callback'}
  infinite={true}
  bullets={true}
  arrowsNav={true}
  callback={()=> window.alert('here')}
>
  <div>
    <div className='slider my-slider-callback'>
      <ul className='slider-wrapper'>
        {items.map((item) => (
          <li key={item}>
            <img src={moon} />
          </li>
        ))}
      </ul>
    </div>
  </div>
</Slider>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

No Arrows

<Slider
  slideClass={'my-slider-no-arrows'}
  infinite={true}
  bullets={true}
  arrowsNav={false}
>
  <div>
    <div className='slider my-slider-no-arrows'>
      <ul className='slider-wrapper'>
        {items.map((item) => (
          <li key={item}>
            <img src={moon} />
          </li>
        ))}
      </ul>
    </div>
  </div>
</Slider>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

No Bullets

<Slider
  slideClass={'my-slider-no-bullets'}
  infinite={true}
  bullets={false}
  arrowsNav={true}
>
  <div>
    <div className='slider my-slider-no-bullets'>
      <ul className='slider-wrapper'>
        {items.map((item) => (
          <li key={item}>
            <img src={moon} />
          </li>
        ))}
      </ul>
    </div>
  </div>
</Slider>