React-simple-carousel-image-slider NPM

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

demo gif

live demo link

Video Tutorial

Install

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

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

Usage

example 1 : image load from local storage.

import { SimpleCarouselSlider } from 'react-simple-carousel-image-slider'
import 'react-simple-carousel-image-slider/dist/index.css'


  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>
  );
}

example 2 : image load from website.

import { SimpleCarouselSlider } from 'react-simple-carousel-image-slider'
import 'react-simple-carousel-image-slider/dist/index.css'

 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>
 );
}

example 3 : responsive.

import { SimpleCarouselSlider } from 'react-simple-carousel-image-slider'
import 'react-simple-carousel-image-slider/dist/index.css'

 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"
      responsive={[
         {
           breakPoint: 420,
           height: "300px",
           parallax: false
         },
         {
           breakPoint: 600,
           height: "400px",
         },
         {
           breakPoint: 1000,
           height: "500px"
         }
       ]}
     />
   </div>
 );
}

If You want to see more detail source,

example/App.tsx

Props

Name	Type	Required	Description	Default
width	`String`	`Optional`	Image Slider Width
height	`String`	`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
thumb	`Boolean`	`Optional`	Slider thumbnail	false
responsive	`Array`	`Optional`		responsive by media query

responsive object details bellow : 1. breakPoint : 'number for media query' 2. height : 'string' 3. width : 'string' 4. parallax : 'boolean' 5. duration : 'string' 6. autoplay : 'boolean'

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 }

/* thumb */ 
#essSliderThumb  { // do something }