1.0.10 • Published 3 years ago
react-tiga-swiper v1.0.10
react-tiga-swiper
a fantastic react swiper component
Install
npm install --save react-tiga-swiper
Usage
import React, { useRef, useState } from "react";
import Swiper,{SwipeRef} from 'react-tiga-swiper';
import 'react-tiga-swiper/dist/index.css';
function App() {
const swiperRef = useRef<SwipeRef>(null);
const [index, setIndex] = useState<any>();
const swiperData = ["#99CCCC", "#FFCC99", "#FFCCCC", "#FFFFCC","#CCFFFF"];
const swipeTo = () => {
const swiperInstance = swiperRef.current;
const currPage: string = index * 1 + '';
swiperInstance?.swipeTo(parseInt(currPage, 10));
};
const prev = () => {
const swiperInstance = swiperRef.current;
swiperInstance?.prev();
};
const next = () => {
const swiperInstance = swiperRef.current;
swiperInstance?.next();
};
const onChange = (currPage: number, prevPage: number) => {
console.log(currPage, prevPage);
};
return (
<>
<div style={{ marginBottom: 20 }}>
<div className="manu-action">
<input
type="number"
value={index}
onChange={(e) => setIndex(e.target.value)}
/>
<span className="btn" onClick={swipeTo}>swipe to (index start 0)</span>
</div>
<div className="more-action">
<span className="btn" onClick={prev}>prev</span>
<span className="btn" onClick={next}>next</span>
</div>
</div>
<Swiper
className="demo-swiper-container"
autoPlay={3000}
selectedIndex={0}
showIndicators={true}
indicator={null}
dots={null}
direction="vertical"
loop={false}
ref={swiperRef}
onChange={onChange}
>
{swiperData.map((item: string, key) => (
<div key={key} style={{backgroundColor: item}}>{key + 1}</div>
))}
</Swiper>
</>
);
}
API
attribute | desc | type | default | others |
---|---|---|---|---|
duration | Animation duration(ms) | number | 300 | |
autoPlay | Autoplay interval(ms) | number | 3000 | |
selectedIndex | index of initial swiper, start from 0 | number | 0 | |
direction | scroll direction | string | horizontal | 'vertical | |
loop | whether to enable loop | bool | true | |
touchable | whether to enable touchable | bool | true | |
showIndicators | whether to enable show indicators | bool | true | |
showDots | whether to enable show dots | bool | true | |
dots | bottom dots | React.ReactNode | null | |
indicator | indicator | React.ReactNode | null | |
style | style | React.CSSProperties | {} | |
className | className | string | '' | |
onChange | emitted when currage swipe changed | (current: number, prev: number): void | noop |
Swipe Methods
methods | desc | argument | desc |
---|---|---|---|
swipeTo | swipe to target index | index | start 0 |
prev | swipe to prev item | ||
next | swipe to next item |
License
MIT © xigua1994