1.0.1 • Published 3 years ago

cpm-10 v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

React Card Carousel

A simple React carousel.

  • GitHub
  • Demo

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, oneOfhorizontal, vertical, default: horizontal): Card alignment display.
  • spread (String, oneOfnarrow, 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.

acorn-jsxajvacceptsansi-escapesacornajv-keywordsansi-colorsansi-htmlajv-errorsaprobaansi-stylesansi-regexarr-diffanymatcharr-flattenargparsearray-unionarr-unionarray-flattenarray-uniqueasn1.jsassertassign-symbolsasyncastral-regexasync-eacharray-uniqatobasync-limiterbabel-code-framebabel-generatorbabel-helper-bindify-decoratorsbabel-helper-builder-react-jsxbabel-helper-call-delegatebabel-helper-define-mapbabel-helper-explode-assignable-expressionbabel-helper-builder-binary-assignment-operator-visitorbabel-helper-explode-classbabel-helper-get-function-aritybabel-helper-optimise-call-expressionbabel-helper-regexbabel-helper-hoist-variablesbabel-helpersbabel-helper-remap-async-to-generatorbabel-helper-replace-supersbabel-messagesbabel-plugin-check-es2015-constantsbabel-plugin-syntax-async-generatorsbabel-plugin-syntax-decoratorsbabel-plugin-syntax-async-functionsbabel-plugin-syntax-class-propertiesbabel-plugin-syntax-class-constructor-callbabel-plugin-syntax-do-expressionsbabel-plugin-syntax-exponentiation-operatorbabel-plugin-syntax-export-extensionsbabel-plugin-syntax-flowbabel-plugin-syntax-function-bindbabel-plugin-syntax-object-rest-spreadbabel-plugin-syntax-dynamic-importbabel-helper-function-namebabel-plugin-syntax-trailing-function-commasbabel-plugin-syntax-jsxbabel-plugin-transform-class-constructor-callbabel-plugin-transform-async-generator-functionsbabel-plugin-transform-class-propertiesbabel-plugin-transform-decoratorsbabel-plugin-transform-async-to-generatorbabel-plugin-transform-do-expressionsbabel-plugin-transform-es2015-arrow-functionsbabel-plugin-transform-es2015-computed-propertiesbabel-plugin-transform-es2015-classesbabel-plugin-transform-es2015-block-scoped-functionsbabel-plugin-transform-es2015-block-scopingbabel-plugin-transform-es2015-destructuringbabel-plugin-transform-es2015-for-ofbabel-plugin-transform-es2015-duplicate-keysbabel-plugin-transform-es2015-modules-amdbabel-plugin-transform-es2015-literalsbabel-plugin-transform-es2015-function-namebabel-plugin-transform-es2015-modules-commonjsbabel-plugin-transform-es2015-modules-umdbabel-plugin-transform-es2015-modules-systemjsbabel-plugin-transform-es2015-object-superbabel-plugin-transform-es2015-parametersbabel-plugin-transform-es2015-shorthand-propertiesbabel-plugin-transform-es2015-spreadbabel-plugin-transform-es2015-template-literalsbabel-plugin-transform-es2015-sticky-regexbabel-plugin-transform-es2015-typeof-symbolbabel-plugin-transform-exponentiation-operatorbabel-plugin-transform-es2015-unicode-regexbabel-plugin-transform-react-display-namebabel-plugin-transform-react-jsx-selfbabel-plugin-transform-flow-strip-typesbabel-plugin-transform-function-bindbabel-plugin-transform-react-jsx-sourcebabel-preset-stage-1babel-preset-stage-2babel-plugin-transform-strict-modebabel-preset-flowbabel-preset-stage-3babel-plugin-transform-regeneratorbabel-runtimebalanced-matchbabel-typesbabel-traversebabel-templatebabel-registerbasebase64-jsbig.jsbabel-plugin-transform-export-extensionsbluebirdbinary-extensionsbabylonbody-parserbn.jsbrorandbracesbrowserify-desbrace-expansionbrowserify-aesbonjourbrowserify-cipherbatchbrowserify-zlibbrowserify-rsabufferbuffer-frombrowserslistbuiltin-status-codesbuffer-indexofbytescacachecallsitesbuffer-xorcamelcasecache-basechalkchardetchokidarchownrcaniuse-litecli-cursorcipher-basechrome-trace-eventclass-utilscli-widthcliuicode-point-atcollection-visitcommondircolor-convertcomponent-emittercommandercompressibleconcat-streamconsole-browserifyconnect-history-api-fallbackconcat-mapconstants-browserifycontent-typecompressioncookie-signaturecopy-descriptorcontent-dispositioncopy-concurrentlycore-jsconvert-source-mapcore-util-iscookiecolor-namecreate-hashcrypto-browserifycreate-ecdhcyclistbrowserify-signdate-nowdecode-uri-componentdecamelizedeep-equalcross-spawndebugdefault-gatewaydeep-isdefine-propertiesdeldepddestroydes.jsdetect-indentdefine-propertydetect-nodedetect-filediffie-hellmancreate-hmacdns-equaldomain-browserdns-txtdoctrinedns-packetduplexifyemoji-regexellipticelectron-to-chromiumemojis-listerrnoend-of-streamencodeurlescape-htmlenhanced-resolveeslint-scopeeslint-utilsespreeesprimaesqueryescape-string-regexpesrecurseeslint-visitor-keysetagesutilsestraverseeventemitter3eventsexpand-bracketsexpressevp_bytestokeyexpand-rangeeventsourceexecaexternal-editorexpand-tildefaye-websocketfast-deep-equalextend-shallowfast-json-stable-stringifyfast-levenshteinfiggy-puddingextglobfiguresfile-entry-cachefinalhandlerfill-rangefilename-regexfindup-syncflattedflush-write-streamflat-cachefor-ownfor-inee-firstfollow-redirectsfind-cache-dirfreshfind-upforwardedfs-write-stream-atomicfrom2fs.realpathfragment-cachefs-readdir-recursivefunction-bindget-caller-fileglob-parentfunctional-red-black-treeget-streamglobglob-baseget-valueglobal-modulesglobal-prefixgraceful-fsglobbyhas-ansihashas-valueglobalshas-flaghas-valueshandle-thinghash-basehmac-drbghash.jshpack.jshome-or-tmphtml-entitieshomedir-polyfillhttp-deceiverhttp-errorshttp-proxyhttp-proxy-middlewarehttps-browserifyiconv-liteiferrieee754import-freshimport-localignoreinheritsimurmurhashinflightinfer-owneriniinternal-ipinterpretinquirerinvariantip-regexhttp-parser-jsinvert-kvipipaddr.jsis-argumentsis-accessor-descriptoris-bufferis-absolute-urlis-data-descriptoris-date-objectis-descriptoris-binary-pathis-equal-shallowis-extendableis-dotfileis-finiteis-extglobis-globis-fullwidth-code-pointis-path-in-cwdis-numberis-path-insideis-path-cwdis-plain-objis-plain-objectis-primitiveis-promiseis-posix-bracketis-regexis-wslis-streamisarrayisobjectisexejsescjs-tokensjs-yamlis-windowsjson-schema-traversejson-parse-better-errorsjson3json-stable-stringify-without-jsonifyjson5killablelcidkind-oflevnloader-utilslodashlocate-pathmake-dirloose-envifyloader-runnermamacrologlevellru-cachemap-age-cleanermap-visitmap-cachemedia-typermath-randommd5.jsmemory-fsmerge-descriptorsmiller-rabinmemmethodsmicromatchmime-typesmime-dbmimeminimalistic-assertminimatchminimalistic-crypto-utilsmimic-fnmississippiminimistmove-concurrentlymixin-deepmsmulticast-dnsnanmulticast-dns-service-typesmkdirpnatural-comparenice-trynanomatchneo-asyncmute-streamnegotiatornode-forgenpm-run-pathnode-libs-browsernumber-is-nanobject-keysobject-assignnormalize-pathobject-isobject-copyobject-visitobufobject.pickonetimeobject.omiton-headersonceon-finishedoriginalos-browserifyopnoptionatoros-tmpdiros-homediros-localeoutput-file-syncp-deferp-limitp-finallyp-mapp-is-promisep-locatep-tryparallel-transformparent-modulepakoparse-asn1p-retryparseurlparse-passwdpath-browserifyparse-globpascalcasepath-is-absolutepath-keypath-to-regexppath-parsepath-is-insidepbkdf2path-existspinkiepath-dirnamepifypkg-dirpinkie-promiseposix-character-classesportfinderprelude-lsprivateprocess-nextick-argsprogressprocessprrpublic-encryptpreserveproxy-addrpumppunycodequerystring-es3pumpifyqspromise-inflightrandomfillrandomaticquerystringifyrange-parserrandombytesquerystringreact-isregenerateraw-bodyreadable-streamregenerator-runtimeregex-cachereaddirpregex-notregenerator-transformregexp.prototype.flagsregexppregjsgenregexpu-coreregjsparserremove-trailing-separatorrepeatingrequire-directoryrepeat-stringrepeat-elementrequire-main-filenameresolveresolve-dirrequires-portresolve-cwdresolve-fromretretryresolve-urlrestore-cursorrimrafrun-queuerun-asyncsafe-bufferripemd160safe-regexrxjsschedulersafer-bufferselect-hosesendsemverselfsignedserialize-javascriptsha.jsserve-indexsetprototypeofsetimmediateshebang-regexsignal-exitslice-ansiset-valueslashsnapdragonset-blockingserve-staticsnapdragon-utilsnapdragon-nodesockjssource-mapshebang-commandsource-map-resolvesource-list-mapsockjs-clientsource-map-supportsource-map-urlspdyspdy-transportsprintf-jsstatusesssristatic-extendstream-browserifysplit-stringstream-shiftstring-widthstream-eachstring_decoderstrip-eofstrip-ansisupports-colortablestream-httpterserterser-webpack-pluginstrip-json-commentstext-tablethroughtapablethunkytimers-browserifyto-object-paththrough2to-fast-propertiesto-arraybufferto-regexto-regex-rangetrim-righttmptslibtty-browserifytoidentifiertype-checkunion-valuetype-festunique-filenametype-isunset-valuetypedarrayunique-slugunpipeuri-jsurixurlurl-parseuseutilv8-compile-cacheutils-mergeutil-deprecateuuidvarywbufvm-browserifyupathwatchpackwebpack-dev-middlewarewebpack-sourceswebpack-logwebsocket-driverwebsocket-extensionswhich-moduleworker-farmwhichwrappywrap-ansiwordwrapwswritey18nyargs-parserxtendyargsyallistfsevents
1.0.1

3 years ago