react-simple-carousel-image-slider

Simple Carousel Image Slider Component for ReactJS v18

• Just Two Elements will be used. (for display images)
• Support GPU Render, by default.
• Support Image Preload.
• Support SSR. ( server-side-rendering )

Live demo

live demo link

Video Tutorial

Install

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

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

Usage

image load from local storage.

import SimpleCarouselSlider from 'react-simple-carousel-image-slider';

  const images = [
    require('./img/1.jpg'),
    require('./img/2.jpg'),
    require('./img/3.jpg'),
    require('./img/4.jpg'),
    require('./img/5.jpg')
  ];

const App = () => {
  return (
    <div>
      <SimpleCarouselSlider
      images={images} 
      autoplay={false}
      width= "100%"
      height="450px"
      />
    </div>
  );
}

or

image load from website.

import SimpleCarouselSlider from 'react-simple-carousel-image-slider';

 const images = [
"https://raw.githubusercontent.com/shafayatC/react-simple-carousel-image-slider/main/src/img/1.jpg",
"https://raw.githubusercontent.com/shafayatC/react-simple-carousel-image-slider/main/src/img/5.jpg"
 ];

const App = () => {
 return (
   <div>
     <SimpleCarouselSlider
     images={images} 
     autoplay={false}
     width= "100%"
     height="450px"
     />
   </div>
 );
}

If You want to see more detail source,

• example/App.tsx
  

Props

Name	Type	Required	Description	Default
width	Number	Optional	Image Slider Width
height	Number	Optional	Image Slider Height
images	Array	Required	Images, Array Elements should be like this structure, {"image.jpg", ""image2.jpg}
duration	String	Optional	css object	0.7s
infinity	Boolean	Optional	Infinity image slide	true
autoplay	Boolean	Optional	Auto play slider	true
autplayDelay	Number	Optional	Auto play slide delay time	3000
parallax	Boolean	Optional	Parallax slider image	false

If You want to see more detail,

Style customize

• can customize by className with !important;

/* slider */ 
#essSlide {  // do something }
.essSliderCls { // do something } 

/* controller */ 
.essController { // do something }
.essNext { // do something }
.essPrev { // do something }

License

MIT