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 |d

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)