2.0.0 • Published 3 years ago

samc2 v2.0.0

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.

acceptsacornajvacorn-jsxajv-errorsajv-keywordsansi-escapesansi-colorsansi-stylesansi-htmlanymatchansi-regexargparseaprobaarr-diffarr-flattenarr-unionarray-flattenarray-unionarray-uniqarray-uniqueassertassign-symbolsasync-eachastral-regexasyncbabel-code-frameasync-limiteratobbabel-generatorbabel-helper-builder-binary-assignment-operator-visitorbabel-helper-bindify-decoratorsasn1.jsbabel-helper-call-delegatebabel-helper-define-mapbabel-helper-explode-assignable-expressionbabel-helper-explode-classbabel-helper-function-namebabel-helper-optimise-call-expressionbabel-helper-get-function-aritybabel-helper-hoist-variablesbabel-helper-regexbabel-helper-replace-supersbabel-helper-remap-async-to-generatorbabel-helpersbabel-messagesbabel-plugin-check-es2015-constantsbabel-plugin-syntax-async-functionsbabel-plugin-syntax-async-generatorsbabel-plugin-syntax-class-constructor-callbabel-plugin-syntax-class-propertiesbabel-plugin-syntax-do-expressionsbabel-plugin-syntax-decoratorsbabel-plugin-syntax-dynamic-importbabel-plugin-syntax-export-extensionsbabel-plugin-syntax-exponentiation-operatorbabel-plugin-syntax-flowbabel-plugin-syntax-function-bindbabel-plugin-syntax-jsxbabel-plugin-syntax-object-rest-spreadbabel-plugin-transform-async-generator-functionsbabel-plugin-syntax-trailing-function-commasbabel-plugin-transform-class-propertiesbabel-plugin-transform-async-to-generatorbabel-plugin-transform-class-constructor-callbabel-helper-builder-react-jsxbabel-plugin-transform-do-expressionsbabel-plugin-transform-es2015-arrow-functionsbabel-plugin-transform-es2015-block-scopingbabel-plugin-transform-es2015-block-scoped-functionsbabel-plugin-transform-es2015-classesbabel-plugin-transform-es2015-destructuringbabel-plugin-transform-es2015-duplicate-keysbabel-plugin-transform-es2015-for-ofbabel-plugin-transform-es2015-computed-propertiesbabel-plugin-transform-es2015-function-namebabel-plugin-transform-es2015-literalsbabel-plugin-transform-es2015-modules-amdbabel-plugin-transform-es2015-modules-commonjsbabel-plugin-transform-es2015-modules-systemjsbabel-plugin-transform-es2015-object-superbabel-plugin-transform-es2015-shorthand-propertiesbabel-plugin-transform-es2015-modules-umdbabel-plugin-transform-es2015-parametersbabel-plugin-transform-es2015-spreadbabel-plugin-transform-es2015-template-literalsbabel-plugin-transform-es2015-sticky-regexbabel-plugin-transform-es2015-unicode-regexbabel-plugin-transform-es2015-typeof-symbolbabel-plugin-transform-exponentiation-operatorbabel-plugin-transform-function-bindbabel-plugin-transform-flow-strip-typesbabel-plugin-transform-react-display-namebabel-plugin-transform-react-jsx-sourcebabel-plugin-transform-react-jsx-selfbabel-plugin-transform-export-extensionsbabel-plugin-transform-decoratorsbabel-plugin-transform-regeneratorbabel-preset-flowbabel-plugin-transform-strict-modebabel-preset-stage-1babel-preset-stage-2babel-preset-stage-3babel-registerbabel-runtimebabel-templatebabel-traversebabylonbabel-typesbalanced-matchbasebase64-jsbatchbig.jsbinary-extensionsbluebirdbn.jsbody-parserbrace-expansionbonjourbracesbrowserify-aesbrowserify-desbrowserify-cipherbrowserify-rsabrowserify-signbrorandbrowserify-zlibbrowserslistbufferbuffer-frombuffer-indexofbuffer-xorbuiltin-status-codescacachebytescache-basecallsitescaniuse-litecamelcasechardetchalkchownrchokidarcipher-basechrome-trace-eventcli-cursorcli-widthclass-utilscode-point-atcollection-visitcolor-namecommandercommondircliuicomponent-emittercompressioncompressibleconcat-mapconcat-streamcolor-convertconnect-history-api-fallbackconstants-browserifycontent-dispositionconsole-browserifycontent-typeconvert-source-mapcookie-signaturecopy-concurrentlycookiecopy-descriptorcore-jscore-util-iscreate-ecdhcreate-hashcreate-hmaccross-spawncrypto-browserifycyclistdate-nowdebugdecamelizedeep-equaldecode-uri-componentdeep-isdefault-gatewaydefine-propertiesdefine-propertydeldepddes.jsdestroydetect-indentdetect-filedetect-nodedns-equaldiffie-hellmandns-packetdns-txtdoctrinedomain-browseree-firstduplexifyelectron-to-chromiumellipticemoji-regexemojis-listend-of-streamencodeurlescape-htmlenhanced-resolveerrnoeslint-scopeescape-string-regexpeslint-visitor-keyseslint-utilsespreeesprimaesrecurseesqueryestraverseesutilseventemitter3eventsetageventsourceevp_bytestokeyexecaexpand-bracketsexpand-rangeexpand-tildeextend-shallowexpressexternal-editorfast-deep-equalextglobfast-json-stable-stringifyfast-levenshteinfaye-websocketfiguresfiggy-puddingfile-entry-cachefilename-regexfinalhandlerfill-rangefind-cache-dirfind-upfindup-syncflush-write-streamflat-cachefollow-redirectsfor-ownflattedfor-inforwardedfragment-cachefreshfrom2fs-readdir-recursivefs-write-stream-atomicfs.realpathfunction-bindget-caller-filefunctional-red-black-treeget-streamget-valueglobglob-baseglob-parentglobal-modulesglobal-prefixglobalsglobbygraceful-fshandle-thinghashas-ansihas-flaghas-valueshash.jshas-valuehash-basehome-or-tmphmac-drbghpack.jshtml-entitieshttp-errorshttp-parser-jshomedir-polyfillhttp-deceiverhttp-proxyhttp-proxy-middlewareiconv-litehttps-browserifyieee754iferrignoreimurmurhashimport-freshinfer-ownerimport-localinflightinheritsiniinquirerinternal-ipinterpretinvariantinvert-kvipip-regexipaddr.jsis-absolute-urlis-argumentsis-accessor-descriptoris-bufferis-binary-pathis-data-descriptoris-descriptoris-dotfileis-date-objectis-extendableis-equal-shallowis-extglobis-fullwidth-code-pointis-globis-finiteis-numberis-path-in-cwdis-path-cwdis-plain-objectis-plain-objis-path-insideis-posix-bracketis-promiseis-regexis-primitiveis-streamis-windowsis-wslisarrayisexeisobjectjs-tokensjs-yamljsescjson-schema-traversejson-parse-better-errorsjson-stable-stringify-without-jsonifyjson5json3killablekind-oflcidlevnlodashloader-runnerloader-utilsloglevelloose-envifylru-cachemake-dirmamacromap-age-cleanermap-cachelocate-pathmap-visitmath-randommd5.jsmedia-typermemmemory-fsmerge-descriptorsmethodsmicromatchmiller-rabinmimemime-dbminimalistic-assertmime-typesminimalistic-crypto-utilsminimatchmimic-fnmississippiminimistmixin-deepmkdirpmove-concurrentlymulticast-dnsmulticast-dns-service-typesmsnannatural-comparenanomatchmute-streamnegotiatornice-tryneo-asyncnode-libs-browsernpm-run-pathnormalize-pathnumber-is-nannode-forgeobject-assignobject-isobject-copyobject-visitobject-keysobject.pickobject.omiton-finishedobufonceon-headersopnonetimeoptionatoros-browserifyoriginalos-homediros-localeos-tmpdirp-deferoutput-file-syncp-finallyp-is-promisep-locatep-limitp-retryp-mapp-trypakoparallel-transformparent-moduleparse-globparse-asn1parseurlpath-browserifyparse-passwdpascalcasepath-dirnamepath-existspath-is-insidepath-is-absolutepath-keypath-parsepbkdf2path-to-regexppkg-dirpifyportfinderpinkie-promiseposix-character-classespreserveprelude-lsprivateprocess-nextick-argsprocessprogresspromise-inflightproxy-addrpublic-encryptprrpumpifypumppunycodequerystring-es3querystringquerystringifyrandomfillrandombytesraw-bodyrange-parserpinkiereact-israndomaticreaddirpregeneratereadable-streamregenerator-runtimeregenerator-transformregex-cacheregex-notregexppregexp.prototype.flagsregjsgenremove-trailing-separatorregjsparserrepeat-elementrepeat-stringrequire-directoryrepeatingqsrequire-main-filenameregexpu-corerequires-portresolve-cwdresolve-fromresolve-dirresolve-urlresolverestore-cursorripemd160retretryrimrafrun-asyncrun-queuesafe-buffersafe-regexrxjsschedulersafer-bufferselect-hoseselfsignedsemversendserve-indexserialize-javascriptserve-staticset-valueset-blockingsetimmediatesetprototypeofsha.jsshebang-commandshebang-regexsignal-exitslashslice-ansisnapdragonsnapdragon-nodesnapdragon-utilsockjs-clientsource-list-mapsource-mapsource-map-supportspdy-transportspdysource-map-resolvesource-map-urlsplit-stringssristatic-extendsprintf-jsstatusesstream-browserifysockjsstream-httpstream-eachstream-shiftstring-widthstring_decoderstrip-ansistrip-eofsupports-colortabletapableterserterser-webpack-pluginstrip-json-commentstext-tablethroughthrough2thunkytimers-browserifytmpto-arraybufferto-object-pathto-fast-propertiesto-regexto-regex-rangetoidentifiertrim-righttty-browserifytslibtype-festtype-checktypedarraytype-isunion-valueunique-slugunpipeunique-filenameunset-valueupathurl-parseuri-jsurixurlutil-deprecateutiluseuuidutils-mergevm-browserifyv8-compile-cachevarywbufwatchpackwebpack-sourceswebpack-logwebsocket-extensionswebsocket-driverwhich-modulewhichwordwrapwrap-ansiwebpack-dev-middlewareworker-farmwswriteyallistxtendy18nyargsyargs-parserwrappyfsevents
2.0.0

3 years ago

1.0.2

3 years ago