Simple ImageSlider Component for ReactJS v17
- Just Two Elements will be used. (for display images)
- Support GPU Render, by default.
- Support Image Preload.
- Support SSR. ( server-side-rendering )
- Selectable Navigation Styles.
// npm npm install react-simple-image-slider --save // yarn yarn add react-simple-image-slider import SimpleImageSlider from "react-simple-image-slider"; 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" }, ]; const App = () => { return ( <div> <SimpleImageSlider width={896} height={504} images={images} showBullets={true} showNavs={true} /> </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: "" } or string[] | |
| style | String | Optional | css object | |
| slideDuration | Number | Optional | css transition-duration property | 0.5 |
| navStyle | Number | Optional | Arrow Navgation Style, 1 or 2 | 1 |
| navSize | Number | Optional | Arrow Size | 50 |
| navMargin | Number | Optional | Arrow Margin | 30 |
| showNavs | Boolean | Required | Toggle Arrow | |
| startIndex | Number | Optional | start Index of Slide | 0 |
| showBullets | Boolean | Required | Toggle Bullets | true |
| loop | Boolean | Optional | looping slider | true |
| autoPlay | Boolean | Optional | auto play | false |
| autoPlayDelay | Boolean | Optional | auto play delay | 2.0 |
| 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,
- can customize by className with
!important;
.your-app { .rsis-container { // do something } } .your-app { .rsis-image { background-size: contain !important; } } ./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 dev // build watch mode // yarn yarn example yarn build yarn dev 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