tiny-slider-react-ar

tiny-slider-react

Original plugin tiny-slider

demo

props

prop	decription
settings	options slider
onClick	callback to return slide clicked (slideClicked, info, event)
startIndex	index of carousel initiation
onIndexChanged	event bind
onTransitionStart	event bind
onTransitionEnd	event bind
onTouchStart	event bind
onTouchMove	event bind
onTouchEnd	event bind

import TinySlider from "tiny-slider-react";
 
const settings = {
  lazyload: true,
  nav: false,
  mouseDrag: true
};
 
<TinySlider settings={settings}>
    {imgs.map((el, index) => (
      <div key={index} style={{ position: "relative" }}>
        <img
          className={`tns-lazy-img`}
          src={loadingImage}
          data-src={el}
          alt=""
          style={imgStyles}
        />
      </div>
    ))}
</TinySlider>

How to use external buttons for prev & next

const settings = {
  lazyload: true,
  nav: false,
  mouseDrag: true,
  controls: false // remove built-in nav buttons
}

Get the slider from refs:

<TinySlider settings={settings} ref={ts => this.ts = ts}>...</TinySlider>

Add onClick for your buttons:

<button type="button" onClick={() => this.onGoTo('prev')}>Previous</button>
<button type="button" onClick={() =>  this.onGoTo('next')}>Next</button>

Add the handler on your component:

onGoTo = dir => this.ts.slider.goTo(dir)