1.1.3 • Published 3 years ago

carosello-tribus v1.1.3

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.

ajv-errorsacceptsajvacornajv-keywordsansi-escapesacorn-jsxansi-colorsansi-stylesansi-regexansi-htmlaprobaarr-flattenargparsearray-unionarr-unionarr-diffarray-uniquearray-flattenassertastral-regexanymatcharray-uniqasn1.jsasync-limiteratobbabel-code-framebabel-generatorbabel-helper-bindify-decoratorsbabel-helper-builder-binary-assignment-operator-visitorbabel-helper-builder-react-jsxbabel-helper-call-delegatebabel-helper-define-mapbabel-helper-explode-assignable-expressionbabel-helper-explode-classbabel-helper-function-nameasyncbabel-helper-optimise-call-expressionassign-symbolsasync-eachbabel-helper-replace-supersbabel-helper-remap-async-to-generatorbabel-messagesbabel-helpersbabel-plugin-check-es2015-constantsbabel-plugin-syntax-async-functionsbabel-helper-hoist-variablesbabel-plugin-syntax-class-propertiesbabel-plugin-syntax-class-constructor-callbabel-plugin-syntax-do-expressionsbabel-plugin-syntax-export-extensionsbabel-plugin-syntax-decoratorsbabel-plugin-syntax-jsxbabel-plugin-syntax-function-bindbabel-plugin-syntax-exponentiation-operatorbabel-plugin-syntax-dynamic-importbabel-plugin-syntax-flowbabel-plugin-syntax-object-rest-spreadbabel-plugin-syntax-trailing-function-commasbabel-plugin-transform-class-constructor-callbabel-plugin-transform-class-propertiesbabel-plugin-transform-async-generator-functionsbabel-plugin-transform-async-to-generatorbabel-plugin-transform-decoratorsbabel-plugin-transform-do-expressionsbabel-helper-get-function-aritybabel-plugin-transform-es2015-arrow-functionsbabel-plugin-transform-es2015-block-scopingbabel-plugin-transform-es2015-classesbabel-plugin-transform-es2015-block-scoped-functionsbabel-plugin-transform-es2015-computed-propertiesbabel-plugin-transform-es2015-destructuringbabel-helper-regexbabel-plugin-transform-es2015-for-ofbabel-plugin-transform-es2015-duplicate-keysbabel-plugin-transform-es2015-function-namebabel-plugin-transform-es2015-literalsbabel-plugin-transform-es2015-modules-commonjsbabel-plugin-transform-es2015-modules-amdbabel-plugin-transform-es2015-modules-systemjsbabel-plugin-syntax-async-generatorsbabel-plugin-transform-es2015-parametersbabel-plugin-transform-es2015-shorthand-propertiesbabel-plugin-transform-es2015-modules-umdbabel-plugin-transform-es2015-object-superbabel-plugin-transform-es2015-sticky-regexbabel-plugin-transform-es2015-spreadbabel-plugin-transform-es2015-template-literalsbabel-plugin-transform-es2015-unicode-regexbabel-plugin-transform-es2015-typeof-symbolbabel-plugin-transform-export-extensionsbabel-plugin-transform-exponentiation-operatorbabel-plugin-transform-function-bindbabel-plugin-transform-flow-strip-typesbabel-plugin-transform-react-display-namebabel-plugin-transform-react-jsx-selfbabel-plugin-transform-regeneratorbabel-plugin-transform-react-jsx-sourcebabel-plugin-transform-strict-modebabel-preset-flowbabel-preset-stage-2babel-preset-stage-3babel-preset-stage-1babel-runtimebabel-registerbabel-typesbabel-templatebabel-traversebabylonbalanced-matchbase64-jsbatchbasebig.jsbody-parserbn.jsbluebirdbrace-expansionbracesbonjourbrorandbrowserify-aesbrowserify-cipherbrowserify-desbrowserify-signbrowserify-rsabrowserify-zlibbufferbinary-extensionsbrowserslistbuffer-frombuffer-xorbuffer-indexofbuiltin-status-codescaniuse-litecache-basecallsitesbyteschalkcamelcasechrome-trace-eventcacachechokidarchardetcliuiclass-utilscli-widthcli-cursorcolor-convertcipher-basecollection-visitcode-point-atchownrcommondircolor-namecomponent-emittercompressiblecompressionconcat-streamconcat-mapconsole-browserifyconnect-history-api-fallbackcontent-dispositionconstants-browserifycontent-typecommandercookieconvert-source-mapcopy-concurrentlycopy-descriptorcore-util-iscookie-signaturecreate-ecdhcreate-hmaccrypto-browserifycreate-hashdate-nowcyclistdecamelizedecode-uri-componentdebugcore-jscross-spawndefine-propertiesdeldeep-isdefine-propertydefault-gatewaydes.jsdepddetect-indentdetect-filedestroydetect-nodedeep-equaldiffie-hellmandns-equaldns-txtdns-packetdoctrinedomain-browserelectron-to-chromiumduplexifyee-firstemoji-regexemojis-listencodeurlenhanced-resolveerrnoescape-htmlescape-string-regexpend-of-streamellipticeslint-scopeespreeeslint-visitor-keysesprimaesqueryesrecurseesutilseventsevp_bytestokeyetageventsourceeslint-utilsestraverseexecaexpand-bracketseventemitter3expand-rangeexpand-tildeexpressfast-deep-equalextend-shallowexternal-editorextglobfast-json-stable-stringifyfast-levenshteinfaye-websocketfiggy-puddingfile-entry-cachefill-rangefinalhandlerfind-cache-dirfilename-regexfind-upfindup-syncflat-cachefiguresflattedflush-write-streamfor-ownfreshfollow-redirectsforwardedfor-infragment-cachefs-readdir-recursivefs.realpathfrom2functional-red-black-treeget-caller-filefunction-bindget-streamglobget-valuefs-write-stream-atomicglob-baseglobal-modulesglob-parentglobal-prefixglobalsglobbygraceful-fshandle-thinghas-flaghas-valueshas-ansihash-basehas-valuehomedir-polyfillhash.jshpack.jshashmac-drbghome-or-tmphttp-deceiverhttp-errorshtml-entitieshttp-proxyhttp-parser-jshttp-proxy-middlewareiconv-liteieee754iferrimurmurhashhttps-browserifyinfer-owneriniimport-localignoreimport-freshinterpretinheritsinquirerinvariantinternal-ipipinvert-kvip-regexipaddr.jsis-accessor-descriptoris-absolute-urlis-argumentsis-bufferis-binary-pathis-data-descriptoris-date-objectinflightis-equal-shallowis-dotfileis-descriptoris-extendableis-finiteis-globis-extglobis-numberis-path-insideis-fullwidth-code-pointis-path-cwdis-path-in-cwdis-plain-objectis-posix-bracketis-plain-objis-primitiveis-promiseis-streamis-regexis-windowsisobjectis-wsljs-yamlisarrayisexejson-schema-traversejsescjson3json-parse-better-errorsjson5json-stable-stringify-without-jsonifykillablejs-tokenslcidkind-oflevnloader-utilslocate-pathloglevelloader-runnermake-dirlru-cachelodashmap-age-cleanermamacromap-visitmap-cacheloose-envifymd5.jsmemory-fsmath-randommedia-typermemmethodsmerge-descriptorsmiller-rabinmicromatchmime-typesmime-dbmimemimic-fnminimalistic-crypto-utilsminimatchminimalistic-assertmississippimixin-deepmkdirpminimistmulticast-dnsmove-concurrentlymulticast-dns-service-typesmute-streammsnatural-comparenanomatchnannode-forgeneo-asyncnegotiatornice-trynode-libs-browsernpm-run-pathnormalize-pathnumber-is-nanobject-assignobject-copyobject-isobject-keysobject-visitobject.omitobject.pickobufon-finishedon-headersonetimeopnoptionatoronceos-homediros-browserifyoriginalos-tmpdiros-localep-deferoutput-file-syncp-is-promisep-finallyp-limitp-mapp-locatep-retryp-trypakoparent-moduleparse-asn1parallel-transformparse-passwdparse-globpascalcasepath-dirnameparseurlpath-existspath-browserifypath-is-absolutepath-is-insidepath-keypath-parsepifypath-to-regexppbkdf2pinkie-promiseportfinderpinkieprelude-lspkg-dirposix-character-classespreserveprivateprogressprocesspromise-inflightprocess-nextick-argsprrproxy-addrpumpqspumpifypunycodepublic-encryptquerystringquerystringifyquerystring-es3randomaticrandombytesrandomfillrange-parserreact-israw-bodyregeneratereaddirpreadable-streamregenerator-runtimeregenerator-transformregex-cacheregex-notregexp.prototype.flagsregexppregjsgenregexpu-coreremove-trailing-separatorrepeat-elementregjsparserrepeatingrequire-directoryrepeat-stringrequire-main-filenamerequires-portresolveresolve-dirresolve-cwdresolve-fromresolve-urlretryretrimrafrestore-cursorripemd160run-asyncsafe-regexsafe-bufferrun-queuerxjssafer-bufferschedulerselect-hosesemversendselfsignedserve-indexserve-staticserialize-javascriptset-blockingsha.jssetprototypeofset-valuesetimmediatesignal-exitslashshebang-regexshebang-commandslice-ansisnapdragonsnapdragon-utilsockjssnapdragon-nodesource-mapsource-list-mapsource-map-resolvesockjs-clientsource-map-supportspdy-transportspdysprintf-jssource-map-urlsplit-stringstatic-extendstream-browserifystatusesssristrip-eofstream-eachstring-widthstring_decoderstream-shiftstream-httpstrip-ansistrip-json-commentssupports-colortersertapableterser-webpack-pluginthroughtimers-browserifytext-tablethrough2tmptableto-arraybufferthunkyto-fast-propertiesto-regex-rangeto-object-pathto-regextslibtrim-righttoidentifiertype-festtty-browserifytype-isunique-filenameunique-slugunpipeunion-valuetype-checkunset-valueupathurixuri-jsurlurl-parseuseutiltypedarrayutil-deprecateutils-mergeuuidv8-compile-cachevarywatchpackvm-browserifywbufwebpack-logwebpack-sourceswebpack-dev-middlewarewebsocket-driverwebsocket-extensionswhichwhich-moduleworker-farmwordwrapwrap-ansiwrappyxtendyallistwritey18nwsyargsyargs-parserfsevents
1.1.3

3 years ago