0.5.7 • Published 1 year ago
tiny-slider-react v0.5.7
tiny-slider-react
Original plugin tiny-slider
Tiny Slider v2 <=> tiny-slider-react >= v5
Tiny Slider v1 <=> tiny-slider-react <= v4
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)
0.5.7
1 year ago
0.5.6
2 years ago
0.5.5
2 years ago
0.5.4
2 years ago
0.5.3
4 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.5.0
4 years ago
0.4.0
5 years ago
0.3.7
6 years ago
0.3.6
6 years ago
0.3.5
6 years ago
0.3.4
6 years ago
0.3.3
6 years ago
0.3.2
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.5
6 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.1
7 years ago