Simple ImageSlider Component for ReactJS v16.0
- Just Two Elements will be used. (for display images)
- Support GPU Render, by default.
- Support Image Preload.
- Selectable Navgation Styles.
// npm npm install react-simple-image-slider --save // yarn yarn add react-simple-image-slider import SimpleImageSlider from "react-simple-image-slider"; class App extends React.Component { render() { const images = [ { url: "images/1.jpg" }, { url: "images/2.jpg" }, { url: "images/3.jpg" }, { url: "images/4.jpg" }, { url: "images/5.jpg" }, { url: "images/6.jpg" }, { url: "images/7.jpg" }, ]; return ( <div> <SimpleImageSlider width={896} height={504} images={images} /> </div> ); } } If You want to see more detail source,
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
| width | Number | Required | Image Slider Width | |
| height | Number | Required | Image Slider Height | |
| images | Array | Required | Images, Array Elements should be like this structure, { url: "" } | |
| style | String | Optional | css object | |
| slideDuration | Number | Optional | css transition-duration property | 0.5 |
| navStyle | Number | Optional | Arrow Navgation Style, 1 or 2 | 1 |
| showNavs | Boolean | Optional | Toggle Arrow Navgation | true |
| showBullets | Boolean | Optional | Toggle Bullets | true |
| useGPURender | Boolean | Optional | Toggle GPU Render | true |
| bgColor | String | Optional | slider container's css background-color property | #000000 |
| onClick | Function | Optional | Image Click Callback function,onClick = (idx, event) => { }idx : number : clicked bullet index (begin from 0) | |
| onClickNav | Function | Optional | Arrow Navigation Callback function,onClickNav = (toRight) => { }toRight : Boolean : slide direction | |
| onClickBullets | Function | Optional | Bullets Callback function,onClickBullets = (idx) => { }idx : Number : clicked bullet index (begin from 0) | |
| onStartSlide | Function | Optional | Slide Transition Start function,onStartSlide = (idx, length) => { }idx : Number : start index (begin from 1) length : Number : image length | |
| onCompleteSlide | Function | Optional | Slide TransitionEnd Callback function,onCompleteSlide = (idx, length) => { }idx : Number : start index (begin from 1) length : Number : image length |
If You want to see more detail,
./example/: demo site souce for testing component./src/: image slider component source./dist/: image slider component distribution./babelrc: babel configure. (version 7.x)./webpack.config.js: webpack configure. (version 4.x)./rollup.config.js: rollup configure.
// npm npm run example // run a test app(demo) by webpack dev server npm run build // build the image slider component by rollup npm run build:watch // build watch mode // yarn yarn example yarn build yarn buidl:watch If you want to run a test app, should build before do that.
After run example by webpack dev server,
open http://localhost:8080/ in a browser
MIT