Notorious Public Menace

    react-simple-carousel-image-slider

    1.0.35 • 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';
    
      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';
    
     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';
    
     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
    responsive Array Optional responsive by media query

    responsive object details bellow :

    1. breakPoint : 'number for media query'
    2. height : 'string'
    3. widht : '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 }
    
    

    License

    MIT © shafayatC

    Install

    npm i react-simple-carousel-image-slider

    DownloadsWeekly Downloads

    877

    Version

    1.0.35

    License

    MIT

    Unpacked Size

    55.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • shafayat