1.1.4 • Published 4 years ago
fade-carousel v1.1.4
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 (
<div className="App">
<Carousel>
//your custom children elements in here
</Carousel>
</div>
);
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 (
<div className="App">
<Carousel divStyle={divStyle} delay={6000} mode={"slide"} >
{urls.map((url, index) => (
<div key={index} style={imageStyle}>
<img
src={url}
style={{ width: "100%", height: "auto" }}
alt="asdada"
onClick={hello}
/>
</div>
))}
</Carousel>
</div>
);
}
export default App;