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

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 }

License

MIT © shafayatC