react-simple-carousel-image-slider

1.1.1 • Public • Published

react-simple-carousel-image-slider

ReactJs Download Count GitHub license

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

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,

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

Package Sidebar

Install

npm i react-simple-carousel-image-slider

Weekly Downloads

6

Version

1.1.1

License

MIT

Unpacked Size

67.7 kB

Total Files

9

Last publish

Collaborators

  • shafayat