react-responsive-carousel
Advanced tools
react-responsive-carousel - npm Package Compare versions
Comparing version 3.0.0 to 3.0.1
| { | ||
| "name": "react-responsive-carousel", | ||
| "version": "3.0.0", | ||
| "version": "3.0.1", | ||
| "description": "React Responsive Carousel", | ||
@@ -5,0 +5,0 @@ "author": { |
198
README.md
@@ -1,91 +0,33 @@ | ||
| # React Responsive Carousel (React 0.14) | ||
| # React Responsive Carousel | ||
| ## Demos and docs: | ||
| [http://leandrowd.github.io/react-responsive-carousel/](http://leandrowd.github.io/react-responsive-carousel/) | ||
| ## Demo | ||
| <http://leandrowd.github.io/react-responsive-carousel/> | ||
| * Note: If you need support for IE8 or older versions of React, install version 0.1.6 | ||
| ## Installing as a package | ||
| `npm install react-responsive-carousel --save` | ||
| ## Getting started | ||
| - Possible properties: | ||
| - (Array) items | ||
| - (Boolean) showControls | ||
| - (Boolean) showStatus | ||
| - (Function) onChange | ||
| - Triggered when the carousel move | ||
| - (Function) onSelectItem | ||
| - Triggered when an item is selected | ||
| - Usage: | ||
| ## Contributing | ||
| ### Slider with controls | ||
| Please, feel free to contributing. You may file an issue or submit a pull request! | ||
| ```javascript | ||
| var React = require('react'); | ||
| var ReactDOM = require('react-dom'); | ||
| var Carousel = require('react-responsive-carousel').Carousel; | ||
| var DemoSliderControls = function(){ | ||
| return ( | ||
| <Carousel type="slider" showControls={true} showStatus={true}> | ||
| <img src="assets/1.jpeg" /> | ||
| <img src="assets/2.jpeg" /> | ||
| <img src="assets/3.jpeg" /> | ||
| <img src="assets/4.jpeg" /> | ||
| <img src="assets/5.jpeg" /> | ||
| <img src="assets/6.jpeg" /> | ||
| <img src="assets/7.jpeg" /> | ||
| </Carousel> | ||
| ); | ||
| }; | ||
| ## Development | ||
| ReactDOM.render(<DemoSliderControls />, document.querySelector('.demo-slider-controls')); | ||
| To run it on your local environment just: | ||
| // Don't forget to include the css in your page | ||
| // <link rel="stylesheet" href="carousel.css"/> | ||
| ``` | ||
| - `git clone git@github.com:leandrowd/react-responsive-carousel.git` | ||
| - `npm install` | ||
| - `gulp` | ||
| - Open your favourite browser on `localhost:8000` | ||
| To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder. | ||
| ### Carousel | ||
| ## Getting started | ||
| ```javascript | ||
| var React = require('react'); | ||
| var ReactDOM = require('react-dom'); | ||
| var ImageGallery = require('react-responsive-carousel').ImageGallery; | ||
| ### Slider with controls | ||
| var DemoGallery = function() { | ||
| return ( | ||
| <ImageGallery showControls={true} showStatus={true}> | ||
| <img src="assets/1.jpeg" /> | ||
| <img src="assets/2.jpeg" /> | ||
| <img src="assets/3.jpeg" /> | ||
| <img src="assets/4.jpeg" /> | ||
| <img src="assets/5.jpeg" /> | ||
| <img src="assets/6.jpeg" /> | ||
| </ImageGallery> | ||
| ); | ||
| }; | ||
| ReactDOM.render(<DemoGallery />, document.querySelector('.demo-gallery')); | ||
| // Don't forget to include the css in your page | ||
| // <link rel="stylesheet" href="imageGallery.css"/> | ||
| // <link rel="stylesheet" href="carousel.css"/> | ||
| ``` | ||
| - Props: | ||
| - (Array) items | ||
| - (Boolean) showControls | ||
| - (Boolean) showStatus | ||
| - (Function) onChange | ||
| - Triggered when the carousel move | ||
| - (Function) onSelectItem | ||
| - Triggered when an item is selected | ||
| ### Image Gallery | ||
| ```javascript | ||
@@ -96,78 +38,50 @@ var React = require('react'); | ||
| var DemoCarousel = function() { | ||
| return ( | ||
| <Carousel> | ||
| <img src="assets/1.jpeg" /> | ||
| <img src="assets/2.jpeg" /> | ||
| <img src="assets/3.jpeg" /> | ||
| <img src="assets/4.jpeg" /> | ||
| <img src="assets/5.jpeg" /> | ||
| <img src="assets/6.jpeg" /> | ||
| <img src="assets/7.jpeg" /> | ||
| </Carousel> | ||
| ); | ||
| }; | ||
| var DemoCarousel = React.createClass({ | ||
| render() { | ||
| return ( | ||
| <Carousel axis="horizontal|vertical" showThumbs={true|false} showArrows={true|false} onChange={onChange} onClickItem={onClickItem} onClickThumb={onClickThumb}> | ||
| <div> | ||
| <img src="assets/1.jpeg" /> | ||
| <p className="legend">Legend 1</p> | ||
| </div> | ||
| <div> | ||
| <img src="assets/2.jpeg" /> | ||
| <p className="legend">Legend 2</p> | ||
| </div> | ||
| <div> | ||
| <img src="assets/3.jpeg" /> | ||
| <p className="legend">Legend 3</p> | ||
| </div> | ||
| </Carousel> | ||
| ); | ||
| } | ||
| }); | ||
| ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel')); | ||
| // Don't forget to include the css in your page | ||
| // Don't forget to include the css in your page | ||
| // <link rel="stylesheet" href="carousel.css"/> | ||
| ``` | ||
| ### How to build your own gallery | ||
| ## Properties | ||
| So simple, just add one carousel[type=slider] and another carousel sending the same parameters for both: | ||
| - (Boolean) showArrows (default: true, options: true, false) | ||
| - (Boolean) showStatus (default: true, options: true, false) | ||
| - (Boolean) showIndicators (default: true, options: true, false) | ||
| - (Boolean) showThumbs (default: true, options: true, false) | ||
| - (Number) selectedItem (default: 0, options: any number between the first and the last index) | ||
| - (String) axis (default: "horizontal" | options: "horizontal", "vertical") | ||
| - (Function) onChange (Triggered when the carousel move) | ||
| - (Function) onClickItem (Triggered when an item is clicked) | ||
| - (Function) onClickThumb (Triggered when a thumb is clicked) | ||
| - Javascript / Jsx: | ||
| ```javascript | ||
| var React = require('react'); | ||
| var Carousel = require('./Carousel'); | ||
| module.exports = React.createClass({ | ||
| getDefaultProps () { | ||
| return { | ||
| selectedItem: 0 | ||
| } | ||
| }, | ||
| getInitialState () { | ||
| return { | ||
| selectedItem: this.props.selectedItem | ||
| } | ||
| }, | ||
| selectItem (selectedItem) { | ||
| this.setState({ | ||
| selectedItem: selectedItem | ||
| }); | ||
| }, | ||
| render () { | ||
| return ( | ||
| <div className="image-gallery"> | ||
| <Carousel type="slider" selectedItem={this.state.selectedItem} showControls={this.props.showControls} showStatus={this.props.showStatus} onChange={this.selectItem} onSelectItem={ this.selectItem }> | ||
| { this.props.children } | ||
| </Carousel> | ||
| <Carousel selectedItem={this.state.selectedItem} onSelectItem={ this.selectItem }> | ||
| { this.props.children } | ||
| </Carousel> | ||
| </div> | ||
| ); | ||
| } | ||
| }); | ||
| ``` | ||
| ## Running locally | ||
| To run it on your local environment just: | ||
| - `git clone git@github.com:leandrowd/react-responsive-carousel.git` | ||
| - `npm install` | ||
| - `gulp` | ||
| - Open your favourite browser on `localhost:8000` | ||
| To generate the npm package run `gulp package`. It will transpile the jsx to js and copy the css into the lib folder. | ||
| ## Contributing | ||
| Please, feel free to contributing. You may file an issue or submit a pull request! | ||
| ## Last update: | ||
| - Adding free children; | ||
| - Adding vertical carousel; | ||
| - Adding free legend; | ||
| - Fixing problem with has3d being called before body was available; | ||
| - Updating to use ref callbacks; | ||
| - Renaming callbacks; | ||
| - Extracting swiper component; | ||
| - Extracting thumbs; | ||
| - Improving styles; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.8%
89735
- Number of lines in readme file
- decreased by-50.29%
86
No dependency changes