67 |
68 |
69 | ,
70 |
71 | document.querySelector('.content')
72 | );
73 | ```
74 |
75 | In order to pass functions to the images, you can simply wrap the `` in a `
`. You should make sure to give your img specific styling properties to confine it to the parent div.
76 |
77 | For more examples, on how to use React Coverflow, please visit http://andyyou.github.io/react-coverflow/
78 |
79 | #### Properties
80 | | Name | Type | Default | Description |
81 | |----------------------|-----------|-------------------|----------------------------------------------|
82 | | children | node | | should be `` nodes |
83 | | infiniteScroll | boolean | false | Allows the carousel to scroll from the last image to the (upon clicking the next button) or from the first to the last (by clicking the previous button). infiniteScroll is not supported by mouse scrolling. |
84 | | displayQuantityOfSide| number | | The number of display image from center to the one side end.|
85 | | navigation | boolean | false | Enable navigation arrows. This will disable image-click navigation. |
86 | | enableHeading | boolean | true | Shows the img alt as the label for the img. |
87 | | enableScroll | boolean | true | Enable scrolling feature. |
88 | | media | object | | To support media query, if you want responsive with parent element you can ignore `width` and `height` props or set it to `auto`. |
89 | | active | number | middle child node | The index of the image you want to be active.|
90 | | clickable | boolean | true | Makes images clickable, setting to false will disable clickability of images. |
91 | | currentFigureScale | number | 1.5 | The scale factor (float) to be applied on the active image. |
92 | | otherFigureScale | number | .8 | The scale factor (float) to be applied on the inactive images.|
93 | | classes | object | | To support style changes for customization. |
94 | | className | string | | To add css class to the coverflow to customize. |
95 |
96 | #### Responsive
97 |
98 | Now, you can use `media` props to support responsive design. The syntax part is come form [Radium](http://projects.formidablelabs.com/radium/)
99 | You can reference to this [doc](https://github.com/FormidableLabs/radium/tree/master/docs/guides#media-queries).
100 |
101 | * 2016-09-13 If you need RWD you should add ``
102 |
103 | ```js
104 | ReactDOM.render(
105 |
106 |
122 |
123 |
124 |
125 |
126 |
127 |
128 | ,
129 | document.querySelector('.example_2')
130 | );
131 | ```
132 |
133 |
134 | ## Development
135 |
136 | If you want to custom the component there are some commands that can help you.
137 |
138 | ```
139 | # Compile component to dist/
140 | $ npm run build-npm
141 |
142 | # Build source of site
143 | $ npm run build-site
144 |
145 | # Clean
146 | $ npm run clean
147 |
148 | # Development Server
149 | $ npm run dev
150 |
151 | # Deploy examples to gh-pages
152 | $ npm run build-npm
153 | $ npm run build-site
154 | $ git subtree push --prefix site origin gh-pages
155 | $ npm version patch
156 | $ npm publish
157 | ```
158 |
159 |
160 |
161 | ## Todo
162 |
163 | * Write test case
164 | * Add further customization options
165 | * Add Prev/Next Arrows instead of Buttons
166 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | //module find
2 |
3 | module.exports = require('./dist/react-coverflow');
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-coverflow",
3 | "version": "0.2.20",
4 | "description": "Carousel of coverflow effect",
5 | "main": "main.js",
6 | "repository": {
7 | "type": "git",
8 | "url": "https://github.com/andyyou/react-coverflow"
9 | },
10 | "scripts": {
11 | "test": "make test",
12 | "prepublishOnly": "rm -rf dist && webpack --progress --colors -d",
13 | "clean": "rm -rf dist && rm -rf site/js/*.bundle.js",
14 | "build-npm": "rm -rf dist && webpack --progress --colors -d --config webpack.prod.js",
15 | "build:watch": "webpack --progress --colors --watch",
16 | "lint": "eslint ./src/Coverflow.js eslint ./site/js/main.js",
17 | "build-site": "rm -rf site/js/*.bundle.js && NODE_ENV=production webpack --config site/webpack.prod.js",
18 | "dev": "rm -rf site/js/*.bundle.js && NODE_ENV=react-hot webpack-dev-server --config site/webpack.dev.js --progress --colors --inline --hot --port 3000 --host 0.0.0.0 --content-base site"
19 | },
20 | "postcss": {
21 | "parser": "sugarss",
22 | "map": false,
23 | "from": "/path/to/src.sss",
24 | "to": "/path/to/dest.css",
25 | "plugins": {
26 | "postcss-plugin": {}
27 | }
28 | },
29 | "keywords": [
30 | "Carousel",
31 | "Coverflow",
32 | "Image slider",
33 | "3D",
34 | "React",
35 | "react-component"
36 | ],
37 | "author": {
38 | "name": "andyyou",
39 | "email": "andyyu0920@gmail.com",
40 | "url": "http://andyyou.github.io/"
41 | },
42 | "license": "MIT",
43 | "dependencies": {
44 | "radium": "^0.25.1"
45 | },
46 | "peerDependencies": {
47 | "prop-types": "^15.6.2",
48 | "react": "^16.5.2"
49 | },
50 | "url": "https://github.com/andyyou/react-coverflow.git",
51 | "devDependencies": {
52 | "babel-core": "^6.26.3",
53 | "babel-eslint": "^9.0.0",
54 | "babel-loader": "^7.1.5",
55 | "babel-plugin-add-module-exports": "^1.0.0",
56 | "babel-plugin-transform-class-properties": "^6.24.1",
57 | "babel-plugin-transform-decorators-legacy": "^1.3.5",
58 | "babel-plugin-transform-runtime": "^6.15.0",
59 | "babel-preset-es2015": "^6.14.0",
60 | "babel-preset-react": "^6.11.1",
61 | "babel-preset-stage-0": "^6.5.0",
62 | "babel-runtime": "^6.26.0",
63 | "chai": "^4.1.2",
64 | "clean-webpack-plugin": "^1.0.1",
65 | "css-loader": "^1.0.0",
66 | "eslint": "^5.6.0",
67 | "eslint-config-airbnb": "^17.1.0",
68 | "eslint-loader": "^2.1.1",
69 | "eslint-plugin-import": "^2.14.0",
70 | "eslint-plugin-jsx-a11y": "^6.1.1",
71 | "eslint-plugin-react": "^7.11.0",
72 | "extract-text-webpack-plugin": "^3.0.2",
73 | "file-loader": "^2.0.0",
74 | "glob": "^7.1.3",
75 | "html-webpack-plugin": "^3.2.0",
76 | "mocha": "^5.2.0",
77 | "node-sass": "^4.9.3",
78 | "postcss-load-config": "^2.0.0",
79 | "postcss-loader": "^3.0.0",
80 | "prop-types": "^15.6.2",
81 | "react": "^16.5.2",
82 | "react-dom": "^16.5.2",
83 | "react-hot-loader": "^4.3.11",
84 | "sass-loader": "^7.0.3",
85 | "style-loader": "^0.23.0",
86 | "uglifyjs-webpack-plugin": "^2.0.1",
87 | "webpack": "^4.19.1",
88 | "webpack-cli": "^3.1.1",
89 | "webpack-dev-server": "^3.1.14",
90 | "webpack-merge": "^4.2.1"
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: 'sugarss',
3 | plugins: {
4 | 'postcss-import': {},
5 | 'postcss-cssnext': {},
6 | 'cssnano': {}
7 | }
8 | }
--------------------------------------------------------------------------------
/site/css/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/css/.keep
--------------------------------------------------------------------------------
/site/images/.keep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/.keep
--------------------------------------------------------------------------------
/site/images/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/1.png
--------------------------------------------------------------------------------
/site/images/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/2.png
--------------------------------------------------------------------------------
/site/images/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/3.png
--------------------------------------------------------------------------------
/site/images/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/4.png
--------------------------------------------------------------------------------
/site/images/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/5.png
--------------------------------------------------------------------------------
/site/images/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/6.png
--------------------------------------------------------------------------------
/site/images/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/7.png
--------------------------------------------------------------------------------
/site/images/8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/8.png
--------------------------------------------------------------------------------
/site/images/9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/9.png
--------------------------------------------------------------------------------
/site/images/album-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-1.png
--------------------------------------------------------------------------------
/site/images/album-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-2.png
--------------------------------------------------------------------------------
/site/images/album-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-3.png
--------------------------------------------------------------------------------
/site/images/album-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-4.png
--------------------------------------------------------------------------------
/site/images/album-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-5.png
--------------------------------------------------------------------------------
/site/images/album-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-6.png
--------------------------------------------------------------------------------
/site/images/album-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-7.png
--------------------------------------------------------------------------------
/site/images/album-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-8.png
--------------------------------------------------------------------------------
/site/images/album-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/album-9.png
--------------------------------------------------------------------------------
/site/images/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sisu0827/React.js-CoverflowEffect/9db7fb53db14a83a0131e50596820b37b2079946/site/images/preview.png
--------------------------------------------------------------------------------
/site/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React Coverflow
7 |
8 |
9 |
10 |
11 |
12 |
38 |
39 |
54 | A Coverflow effect component of React version made for the web.
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | React Coverflow is a React component for building cover flow style carousel in a convenient way.
71 |
72 |
Getting started
73 |
74 | Install
75 | react-coverflow using npm.
76 |
77 |
78 |
npm install react-coverflow
79 |
80 |
81 | Then you can require it and use.
82 |
83 |
84 |
85 |
86 |
87 | For more information, please visit
88 | Github
89 |
90 |
91 |
92 |
93 |
94 |
95 |
Responsive
96 |
97 |
98 | We don't support
99 | react-responsive anymore. Now you can just use
100 | media property to support responsive ability. This example also highlights the function of the properties
101 | of navigation, enableHeading, and infiniteScroll properties.
102 |
103 |
104 |
105 | navigation renders the Previous and Next buttons for easier navigation
106 |
107 |
108 | enableHeading renders the label passed in as the alt property
109 |
110 |
111 | infiniteScroll allows for the user to scroll to continuously scroll through the imgs
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
Support set active outside
141 |
142 |
143 | You can use `state` to specify active now.
144 |