react-simple-image-slider

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.

Live demo

• Go to Site

Install

// npm
npm install react-simple-image-slider --save

// yarn
yarn add react-simple-image-slider

Usage

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,

• example/App.tsx

Props

| 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,

• example/app.tsx

Style customize

• can customize by className with !important;

.your-app {
  .rsis-container {
    // do something
  }
}

.your-app {
  .rsis-image {
    background-size: contain !important;
  }
}

Development

directory & source

• ./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.

scripts

// 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

License

MIT