0.0.5 • Published 6 years ago
react-cover-carousel v0.0.5
React Cover Carousel library.
An animated Cover Carousel component with loads of options! Working smoothly on desktop and on mobile.
Go and play live with some examples online!
Check out all the possibilities and flexibility you have with this carousel by following the link above.
How to use it?
Again, check out how to use it here.
Using it is as simple as:
npm i react-cover-carousel -S
import ReactCoverCarousel from 'react-cover-carousel';
render() {
const allOfYourImages = [
<img src='http://lorempixel.com/400/200/sports' />,
<img src='http://lorempixel.com/400/200/sports' />
];
return <ReactCoverCarousel >{allOfYourImages}</ReactCoverCarousel>
}Explanation of all possible props
All props are optional!
| Prop | Type | Explanation |
|---|---|---|
| width | number | The width of the carousel |
| height | number | The height of the carousel |
| displayQuantityOfSide | number | Elements on each side of the active image |
| navigation | boolean | Should there be navigation buttons - Buttons are customisable with PreviousButton and NextButton |
| enableHeading | boolean | Should a header with the alt text be shown on the image? |
| enableScroll | boolean | Should the carousel be scrollable? |
| activeImageIndex | number | The index of the image that should be active |
| activeImageStyle | React Style Object | The custom style needed for the active image to 🌟 |
| activeFigureScale | number | How much do you want to scale the active image? |
| otherFigureScale | number | Do you want to up/downscale the other images? Go ahead! |
| otherFigureRotation | number | How much do you want to rotate the other covers in the carousel? |
| mediaQueries | Radium Object | By using the npm i radium -S library, you can use this mediaQueries object for your device specific css |
| infiniteScroll | boolean | Do you want to keep on scrolling as if your life depends on it? |
| transitionSpeed | number | How fast do you want the animation to change the active image to fullfill? |
| autoFocus | boolean | Do you want the carousel to autoFocus when loading the component? If so, the user will be able to use his keyboard to navigate |
| PreviousButton | React Component | Create your custom PreviousButton here |
| NextButton | React Component | Create your custom NextButton here |
| maxPixelWidthForMobileMediaQuery | number | on Mobile, the Carousel will be vertically aligned in stead of horizontally. You can define the window width at which the carousel has to turn from vertical to horizontal. |
| zoomable | boolean | Tapping/Clicking on an image will zoom the image to full screen (cfr Instagram). Once Zoomed, clicking/tapping again will trigger the data-action specified on the image |
Default Props
static defaultProps = {
width: window.innerWidth / 2,
height: window.innerHeight / 2,
displayQuantityOfSide: 3,
navigation: false,
enableHeading: false,
enableScroll: true,
activeImageIndex: 0,
activeImageStyle: {
margin: '5em',
},
activeFigureScale: 1.5,
otherFigureScale: 0.8,
otherFigureRotation: 40,
mediaQueries: {},
infiniteScroll: true,
transitionSpeed: 700,
autoFocus: false,
PreviousButton: null,
NextButton: null,
maxPixelWidthForMobileMediaQuery: 480,
zoomable: true
};Want extra features?
Don't hesitate to open a Pull Request, I'd be happy to include it.
This library has to thank someone 🙇🙏
This library was based on React-Coverflow But it didn't met my requirements, so I made a new library, which has been heavily customised. Anyway, many thanks!