Skip to content

Latest commit

 

History

History
executable file
·
88 lines (74 loc) · 3.88 KB

README.md

File metadata and controls

executable file
·
88 lines (74 loc) · 3.88 KB
Raw

React Cover Carousel library.

An animated Cover Carousel component with loads of options! Working smoothly on desktop and on mobile.

Demo

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!