Skip to content

TomorrowIdeas/react-card-carousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Card Carousel

A simple React carousel.

Installation

npm install react-card-carousel --save

Peer Dependencies

Be sure to have all peer dependencies installed as well. React Card Carousel requires the peer dependencies below:

  • react
  • react-dom
  • prop-types

Current Version: 1.1.3

  • 1.1.3 fixed setState warning on componentWillUnmount
  • Removed styled-components as a peer dependency
  • Greatly reduced package size
  • Various bug fixes

Usage

Import ReactCardCarousel and use it as a wrapper around card elements. Example:

import React, { Component } from 'react';
import ReactCardCarousel from 'react-card-carousel';

class MyCarousel extends Component {

  static get CARD_STYLE() {
    return {
      height: '200px',
      width: '200px',
      paddingTop: '80px',
      textAlign: 'center',
      background: '#52C0F5',
      color: '#FFF',
      fontSize: '12px',
      textTransform: 'uppercase',
      borderRadius: '10px',
    };
  }

  render() {
    return (
      <ReactCardCarousel autoplay={ true } autoplay_speed={ 2500 }>
        <div style={ MyCarousel.CARD_STYLE }>
          First Card
        </div>
        <div style={ MyCarousel.CARD_STYLE }>
          Second Card
        </div>
        <div style={ MyCarousel.CARD_STYLE }>
          Third Card
        </div>
        <div style={ MyCarousel.CARD_STYLE }>
          Fourth Card
        </div>
        <div style={ MyCarousel.CARD_STYLE }>
          Fifth Card
        </div>
      </ReactCardCarousel>
    );
  }
}

export default MyCarousel;

Props

  • alignment (String, oneOf[horizontal, vertical], default: horizontal): Card alignment display.
  • spread (String, oneOf[narrow, medium, wide], default: medium): Spread between cards.
  • initial_index (Number, default: 0): Which card to display as center card initially.
  • disable_keydown (Boolean, default: false): Disables left and right arrow key scroll.
  • disable_box_shadow (Boolean, default: false): Disables box shadow around center card.
  • disable_fade_in (Boolean, default: false): Disables initial animation on component render.
  • autoplay (Boolean, default: false)
  • autoplay_speed (Number, default: 5000): Number in milliseconds.
  • afterChange (Function (cardIndex) => {}, default: null): After card change function.

Methods

To use any instance methods, you must first create a ref to the ReactCardCarousel instance. Learn more about React refs in the official documentation.

<ReactCardCarousel ref={ Carousel => this.Carousel = Carousel }>

The methods can be accessed on the this.Carousel instance:

  • this.Carousel.next(): Sets next card as center card.
  • this.Carousel.prev(): Sets previous card as center card.
  • this.Carousel.goTo(index): Sets the specified number index as center card.
  • this.Carousel.getCurrentIndex(): Gets current card index.

NOTE: If you choose to create the ref using React.createRef() instead of using a callback ref, the methods can be accessed on the this.Carousel.current instance.

Credits

Created by @strawbee at Tomorrow Ideas.

Releases

No releases published

Packages

No packages published