Miss any of our Open RFC calls?Watch the recordings here! »

tiny-slider-react-wrapper

0.4.3 • Public • Published

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)

Install

npm i tiny-slider-react-wrapper

DownloadsWeekly Downloads

16

Version

0.4.3

License

ISC

Unpacked Size

295 kB

Total Files

12

Last publish

Collaborators

  • avatar