1.1.1 • Published 2 years ago

react-simple-carousel-image-slider v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

NameTypeRequiredDescriptionDefault
widthStringOptionalImage Slider Width
heightStringOptionalImage Slider Height
imagesArrayRequiredImages,Array Elements should be like this structure,{"image.jpg", ""image2.jpg}
durationStringOptionalcss object0.7s
infinityBooleanOptionalInfinity image slidetrue
autoplayBooleanOptionalAuto play slidertrue
autplayDelayNumberOptionalAuto play slide delay time3000
parallaxBooleanOptionalParallax slider imagefalse
thumbBooleanOptionalSlider thumbnailfalse
responsiveArrayOptionalresponsive 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

1.1.1

2 years ago

1.0.41

2 years ago

1.0.39

3 years ago

1.0.38

3 years ago

1.0.40

3 years ago

1.0.37

3 years ago

1.0.36

3 years ago

1.0.33

3 years ago

1.0.35

3 years ago

1.0.34

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago