npm install fade-carousel

what is this?

Malleable fader Carousel, pass children inside as shown in example below, set the delay prop (default to 8000ms) to set timeout delay, use the divStyle prop to shape carousel, as of version 1.1.0 there are 2 mode options that can be passed through the mode prop, "fade" or "slide", default to fade, slide option shown in example.

Installation

npm i fade-carousel

Then...

``



import Carousel from 'fade-carousel';



return (

    

      

        //your custom children elements in here

      

    

  );





Options



3 props with defaults, defaults for wide full screen carousel



| Prop     | Input                 | Default                             |

| -------- | --------------------- | ----------------------------------- |

| divStyle | Style Object          |

{ height: '800px', width: '100%'}

 |

| delay    | integer, milliseconds |

8000

                              |

| mode     | string                |

fade

                              |



Notes on child positioning



The children elements within Carousel are inside a

display: flex container div, so to center the children for overflowing or underflowing use alignSelf: center and justifySelf: center

 or position children how ever you see fit based on your use-case using flex-box item self postitioning.



Example



import React from 'react';

import Carousel from 'fade-carousel'

import './App.css';



function App() {



 const urls= ['image1.jpg', 'image2.jpg', 'image3.jpg'];



 const divStyle = {

    height: "600px",

    width: "100%",

    backgroundColor: '#f2f2f2'

  }

  const imageStyle = {

    height: '100%',

    width: 'auto',

    justifySelf: 'center'

  }

  const hello = () => {

    console.log("hello");

  };



  return (

    

      

        {urls.map((url, index) => (

          

                          src={url}

              style={{ width: "100%", height: "auto" }}

              alt="asdada"

              onClick={hello}

            />

          

        ))}

      

    

  );

}



export default App;