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. // npmnpm install react-simple-image-slider --save// yarnyarn add react-simple-image-sliderimport 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 NumberRequiredImage Slider Width height NumberRequiredImage Slider Height images ArrayRequiredImages, style StringOptionalcss object slideDuration NumberOptionalcss transition-duration property 0.5navStyle NumberOptionalArrow Navgation Style, 1navSize NumberOptionalArrow Size 50 navMargin NumberOptionalArrow Margin 30 showNavs BooleanRequiredToggle Arrow startIndex NumberOptionalstart Index of Slide 0 showBullets BooleanRequiredToggle Bullets trueloop BooleanOptionallooping slider trueautoPlay BooleanOptionalauto play falseautoPlayDelay BooleanOptionalauto play delay 2.0 useGPURender BooleanOptionalToggle GPU Render truebgColor StringOptionalslider container's css background-color property #000000onClick FunctionOptionalImage Click Callback function,onClick = (idx, event) => { } onClickNav FunctionOptionalArrow Navigation Callback function,onClickNav = (toRight) => { } onClickBullets FunctionOptionalBullets Callback function,onClickBullets = (idx) => { } onStartSlide FunctionOptionalSlide Transition Start function,onStartSlide = (idx, length) => { } onCompleteSlide FunctionOptionalSlide TransitionEnd Callback function,onCompleteSlide = (idx, 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.// npmnpm run example // run a test app(demo) by webpack dev servernpm run build // build the image slider component by rollupnpm run dev // build watch mode// yarnyarn exampleyarn buildyarn devIf you want to run a test app, should build before do that.
After run example by webpack dev server,http://localhost:8080/ in a browser
MIT
