/tiny-slider-react

wrapper of tiny-slider plugin for react.

Primary LanguageJavaScript

tiny-slider-react

Original plugin tiny-slider

Tiny Slider v2 <=> tiny-slider-react >= v5

Tiny Slider v1 <=> tiny-slider-react <= v4

demo demo2

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";
import 'tiny-slider/dist/tiny-slider.css';

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)