HowTo: External prev & next

[tkroll]

Just wanted to share 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)

Hope this helps someone. It's a decent alternative when handed code using Slick.

Thanks to @jechav for React-ifying this.

[jechav]

thanks @tkroll

[riskers]

supplement hooks version:

const ref = useRef() as any;

<button type="button" onClick={() => ref.current.slider.goTo('prev')}>
  Previous
</button>
<button type="button" onClick={() => ref.current.slider.goTo('next')}>
  Next
</button>

<TinySlider
  settings={settings}
  ref={(ts) => {
    ref.current = ts;
  }}
>
  ...
</TinySlider>