Socket
Socket
Sign inDemoInstall

react-responsive-carousel

Package Overview
Dependencies
2
Maintainers
1
Versions
121
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 3.0.12 to 3.0.13

.babelrc

59

package.json
{
"name": "react-responsive-carousel",
"version": "3.0.12",
"version": "3.0.13",
"description": "React Responsive Carousel",

@@ -9,2 +9,4 @@ "author": {

},
"main": "./lib/index.js",
"license": "MIT",
"keywords": [

@@ -22,4 +24,15 @@ "react",

],
"main": "index.js",
"license": "MIT",
"engines": {
"node": ">=4"
},
"scripts": {
"start": "node --harmony ./node_modules/gulp/bin/gulp",
"test": "jest",
"prebuild": "npm test",
"build": "babel ./src -d lib --ignore '__tests__' && gulp styles:package",
"prepublish-to-npm": "git pull && npm run build && git commit -am 'Prepare for publishing'",
"publish-to-npm": "(git pull origin master && npm version patch && git push origin master && git checkout release && git merge master && git push origin release && git checkout master && npm publish && git push --tags)",
"prepublish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp prepublish",
"publish-to-gh-pages": "node --harmony ./node_modules/gulp/bin/gulp publish"
},
"repository": {

@@ -33,6 +46,42 @@ "type": "git",

"homepage": "http://leandrowd.github.io/react-responsive-carousel/",
"devDependencies": {
"babel-cli": "^6.14.0",
"babel-core": "^6.14.0",
"babel-jest": "^14.1.0",
"babel-preset-react": "^6.11.1",
"browserify": "^12.0.1",
"connect-modrewrite": "^0.9.0",
"gh-pages": "^0.11.0",
"gulp": "^3.8.9",
"gulp-clean-css": "^2.0.12",
"gulp-concat": "^2.3.4",
"gulp-connect": "~2.2.0",
"gulp-copy": "0.0.2",
"gulp-cssmin": "^0.1.6",
"gulp-if": "^1.2.4",
"gulp-livereload": "^2.1.1",
"gulp-notify": "^1.4.2",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.2.0",
"gulp-shell": "^0.2.10",
"gulp-streamify": "0.0.5",
"gulp-uglify": "^0.3.1",
"gulp-util": "^3.0.0",
"jest-cli": "^14.1.0",
"react": "^0.14.5",
"react-addons-test-utils": "^0.14.2",
"react-dom": "^0.14.2",
"reactify": "^0.15.2",
"vinyl-source-stream": "^1.1.0",
"watchify": "^2.1.1"
},
"jest": {
"unmockedModulePathPatterns": [
"node_modules"
]
},
"dependencies": {
"classnames": "^2.1.1",
"react-easy-swipe": "0.0.2"
"classnames": "^2.2.5",
"react-easy-swipe": "0.0.4"
}
}

81

README.md
# React Responsive Carousel
## Demo
[![npm version](https://badge.fury.io/js/react-responsive-carousel.svg)](https://badge.fury.io/js/react-responsive-carousel)
[![Build Status](https://travis-ci.org/leandrowd/react-responsive-carousel.svg?branch=master)](https://travis-ci.org/leandrowd/react-responsive-carousel)
#### Demo
<http://leandrowd.github.io/react-responsive-carousel/>
## Installing as a package
#### Installing as a package
`npm install react-responsive-carousel --save`
#### Usage
## Contributing
Please, feel free to contributing. You may file an issue or submit a pull request!
## Development
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.
## Getting started
### Slider with controls
```javascript

@@ -60,28 +41,36 @@ var React = require('react');

// 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"/>
```
## Properties
| Attributes | Type | Default | Description |
| ---------- | :--: | :-----: | ----------- |
| showArrows | `boolean` | `true` | show prev and next arrows |
| showStatus | `boolean` | `true` | show index of the current item. i.e: (1/8) |
| showIndicators | `boolean` | `true` | show little dots at the bottom with links for changing the item |
| showThumbs | `boolean` | `true` | show thumbnails of the images |
| selectedItem | `number` | `0` | selects an item though props / defines the initial selected item |
| axis | `string` | `horizontal` | changes orientation - accepts `horizontal` and `vertical` |
| onChange | `function` | - | Fired when changing positions |
| onClickItem | `function` | - | Fired when an item is clicked |
| onClickThumb | `function` | - | Fired when a thumb it clicked |
- (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)
## 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;
#### Contributing
Please, feel free to contribute. You may file an issue or submit a pull request!
##### Setting up development environment
- `git clone git@github.com:leandrowd/react-responsive-carousel.git`
- `npm install`
- `npm start`
- Open your favourite browser on `localhost:8000` - livereload will be enabled
##### Running tests
- `npm test`
##### Publishing to npm
- `npm run publish-to-npm`
##### Pubishing to gh-pages
- `npm run publish-to-gh-pages`
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc