react-simple-image-slider

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