slider

A Simple Image Slider Component for React.js

Jul 10, 2021
A Simple Image Slider Component for React.js

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.

react-simple-image-slider

View Demo View Github

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,

Props

NameTypeRequiredDescriptionDefault
widthNumberRequiredImage Slider Width
heightNumberRequiredImage Slider Height
imagesArrayRequiredImages,Array Elements should be like this structure,{ url: "" }
styleStringOptionalcss object
slideDurationNumberOptionalcss transition-duration property0.5
navStyleNumberOptionalArrow Navgation Style,1 or 21
navSizeNumberOptionalArrow Size50
navMarginNumberOptionalArrow Margin30
showNavsBooleanRequiredToggle Arrow
startIndexNumberOptionalstart Index of Slide0
showBulletsBooleanRequiredToggle Bulletstrue
useGPURenderBooleanOptionalToggle GPU Rendertrue
bgColorStringOptionalslider container's css background-color property#000000
onClickFunctionOptionalImage Click Callback function,onClick = (idx, event) => { }idx : number : clicked bullet index (begin from 0)
onClickNavFunctionOptionalArrow Navigation Callback function,onClickNav = (toRight) => { }toRight : Boolean : slide direction
onClickBulletsFunctionOptionalBullets Callback function,onClickBullets = (idx) => { }idx : Number : clicked bullet index (begin from 0)
onStartSlideFunctionOptionalSlide Transition Start function,onStartSlide = (idx, length) => { }idx : Number : start index (begin from 1)length : Number : image length
onCompleteSlideFunctionOptionalSlide TransitionEnd Callback function,onCompleteSlide = (idx, length) => { }idx : Number : start index (begin from 1)length : Number : image length

If You want to see more detail,

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 build:watch // build watch mode // yarn yarn example yarn build yarn build: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

Recommended