tiny-slider-react-wrapper

tiny-slider-react

This is a fork of tiny-slider-react Original plugin tiny-slider

UPDATED: Removed call to componentWillReceiveProps

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 TinySliderWrapper from "tiny-slider-react-wrapper";
 
const settings = {
  lazyload: true,
  nav: false,
  mouseDrag: true
};
 
<TinySliderWrapper 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>
    ))}
</TinySliderWrapper>

How to use external buttons for prev & next

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

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)