### Looking for someone to take over the project as I've recently changes jobs and had a child and am no longer capable of supporting this dependency. If anyone is interested, please feel free to take ownership of it
React Coverflow
===
[![npm version](https://badge.fury.io/js/react-coverflow.svg)](http://badge.fury.io/js/react-coverflow)
[![NPM](https://nodei.co/npm/react-coverflow.png)](https://nodei.co/npm/react-coverflow/)
---
![](https://raw.githubusercontent.com/andyyou/react-coverflow/gh-pages/images/preview.png)
React Coverflow is a React component for building cover flow style carousel in a convenient way.
Features of `react-coverflow`
* Flexbox styles of CSS 3.
* Support scroll in the component.
* Support navigation buttons optional
* Using css-module
* Support mobile
## Getting started
Install `react-coverflow` using npm.
```
$ npm install react-coverflow
```
The required stylesheet using `css-module` and include in package(js file), so you don't need include other stylesheet.
## Usage
```js
import React from 'react';
import ReactDOM from 'react-dom';
import Coverflow from 'react-coverflow';
const fn = function () {
/* do your action */
}
ReactDOM.render(
<Coverflow width="960" height="500" classes={{background: 'rgb(233, 23, 23)'}} className=''
displayQuantityOfSide={2}
navigation={false}
enableScroll={true}
clickable={true}
active={0}
>
<div
onClick={() => fn()}
onKeyDown={() => fn()}
role="menuitem"
tabIndex="0"
>
<img
src='image/path'
alt='title or description'
style={{
display: 'block',
width: '100%',
}}
/>
</div>
<img src='image/path' alt='title or description' data-action="http://andyyou.github.io/react-coverflow/"/>
<img src='image/path' alt='title or description' data-action="http://andyyou.github.io/react-coverflow/"/>
</Coverflow>,
document.querySelector('.content')
);
```
In order to pass functions to the images, you can simply wrap the `<img />` in a `<div>`. You should make sure to give your img specific styling properties to confine it to the parent div.
For more examples, on how to use React Coverflow, please visit http://andyyou.github.io/react-coverflow/
#### Properties
| Name | Type | Default | Description |
|----------------------|-----------|-------------------|----------------------------------------------|
| children | node | | should be `<img />` nodes |
| 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. |
| displayQuantityOfSide| number | | The number of display image from center to the one side end.|
| navigation | boolean | false | Enable navigation arrows. This will disable image-click navigation. |
| enableHeading | boolean | true | Shows the img alt as the label for the img. |
| enableScroll | boolean | true | Enable scrolling feature. |
| 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`. |
| active | number | middle child node | The index of the image you want to be active.|
| clickable | boolean | true | Makes images clickable, setting to false will disable clickability of images. |
| currentFigureScale | number | 1.5 | The scale factor (float) to be applied on the active image. |
| otherFigureScale | number | .8 | The scale factor (float) to be applied on the inactive images.|
| classes | object | | To support style changes for customization. |
| className | string | | To add css class to the coverflow to customize. |
#### Responsive
Now, you can use `media` props to support responsive design. The syntax part is come form [Radium](http://projects.formidablelabs.com/radium/)
You can reference to this [doc](https://github.com/FormidableLabs/radium/tree/master/docs/guides#media-queries).
* 2016-09-13 If you need RWD you should add `<StyleRoot>`
```js
ReactDOM.render(
<StyleRoot>
<Coverflow
displayQuantityOfSide={2}
navigation={true}
enableHeading={true}
active={0}
media={{
'@media (max-width: 900px)': {
width: '600px',
height: '300px'
},
'@media (min-width: 900px)': {
width: '960px',
height: '600px'
}
}}
>
<img src='images/album-1.png' alt='Album one' data-action="https://facebook.github.io/react/"/>
<img src='images/album-2.png' alt='Album two' data-action="http://passer.cc"/>
<img src='images/album-3.png' alt='Album three' data-action="https://doce.cc/"/>
<img src='images/album-4.png' alt='Album four' data-action="http://tw.yahoo.com"/>
</Coverflow>
</StyleRoot>
,
document.querySelector('.example_2')
);
```
## Contributors
* [andyyou](https://github.com/andyyou)
* [Calvert Yang](https://github.com/CalvertYang)
* [Ariel Salem](https://github.com/asalem1)
Use [Github issues](https://github.com/andyyou/react-coverflow/issues) for requests
`react-coverflow` is a community project and wouldn't be what it is without contributions! We encourage and support contributions. The `react-coverflow` source code is released under the MIT License.
Feel free to fork and improve/enhance `react-coverflow` any way you want. If you feel that `react-coverflow` will benefit from your changes, please open a pull request.
## Development
If you want to custom the component there are some commands that can help you.
```
# Compile component to dist/
$ npm run build-npm
# Build source of site
$ npm run build-site
# Clean
$ npm run clean
# Development Server
$ npm run dev
# Deploy examples to gh-pages
$ npm run build-npm
$ npm run build-site
$ git subtree push --prefix site origin gh-pages
$ npm version patch
$ npm publish
```
## Release History
* 2019-04-13
- Removed button navigation for arrow navigation. Using arrow navigation now disables the image-click navigation that had previously existed.
* 2018-03-04
- Added Infinite Scrolling Option that allows users to scroll from first to last option continuously using the arrow buttons. Buttons dynamically rendered based on current position of img
* 2018-02-24
- Fixed deprecation errors / warnings, updated packages.
* 2016-09-29
- Add `clickable` props to on/off click of image.
* 2016-09-22
- Fix issue change `active` can update `current` image.
* 2016-09-16
- Add keypress events for prev/next
* 2016-09-13
- Fix [Unknown Prop Warning](https://facebook.github.io/react/warnings/unknown-prop.html)
- Radium updated that if you need RWD feature you need to wrap `<StyleRoot>`
- Remove img `url` attribute, use `data-action` instead. when value is string will redirectin url otherwise can put function will be execute.
- Add `active` attribute
* 2016-09-10
- Use `postcss-loader` instead of `autoprefixer-loader`
- Update babel to v6+
* 2015-12-12 Fix React 0.14.3 two copies issue
* 2015-12-10 Update React version.
* 2015-11-13
- v0.1.9 Support responsive props.
- Update eslint with babel-eslint.
* 2015-11-11
- v0.1.8 Fix some issues and add option to enable/disable scroll ability.
- Add displayName to fix react-devtool show t tag.
* 2015-11-10
- v0.1.6 Support react 0.14.2
* 2015-10-09
- v0.1.4 Add propTypes and enableHeading options for mobile.
- Add example of responsive.
* 2015-10-07 v0.1.3 Support even number of images, F
没有合适的资源?快使用搜索试试~ 我知道了~
react-coverflow:适用于网络的React版本的Coverflow效果组件
共47个文件
png:19个
js:14个
json:2个
需积分: 28 1 下载量 62 浏览量
2021-05-02
16:09:30
上传
评论
收藏 6.29MB ZIP 举报
温馨提示
我最近换工作并生了一个孩子,现在无法寻找人来接管该项目,因此不再能够支持这种依赖性。 如果有人感兴趣,请随时拥有它 ReactCoverflow React Coverflow是一个React组件,用于以方便的方式构建封面流式转盘。 react-coverflow CSS的Flexbox样式3。 支持在组件中滚动。 支持导航按钮可选 使用CSS模块 支持手机 入门 使用npm安装react-coverflow 。 $ npm install react-coverflow 所需的样式表使用css-module并包含在package(js文件)中,因此您不需要包含其他样式表。 用法 import React from 'react' ; import ReactDOM from 'react-dom' ; import Coverflow from 'react-coverflo
资源详情
资源评论
资源推荐
收起资源包目录
react-coverflow-master.zip (47个子文件)
react-coverflow-master
.gitignore 539B
README.md 8KB
test
main.js 100B
main.js 51B
site
css
.keep 0B
webpack.dev.js 180B
webpack.prod.js 177B
images
5.png 300KB
album-3.png 296KB
album-5.png 483KB
3.png 357KB
preview.png 336KB
album-6.png 464KB
4.png 286KB
album-2.png 458KB
album-7.png 307KB
9.png 427KB
album-4.png 411KB
.keep 0B
7.png 256KB
album-9.png 155KB
8.png 279KB
album-8.png 302KB
6.png 311KB
album-1.png 169KB
1.png 221KB
2.png 351KB
js
main.js 6KB
main.bundle.js 1.03MB
main.bundle.js.br 151KB
index.html 6KB
webpack.config.js 2KB
webpack.common.js 2KB
LICENSE 1KB
.eslintrc 2KB
package.json 3KB
src
Coverflow.js 12KB
stylesheets
coverflow.scss 3KB
.babelrc 283B
webpack.dev.js 180B
postcss.config.js 129B
webpack.prod.js 177B
.npmignore 51B
webpack.config.js 2KB
Makefile 66B
webpack.common.js 2KB
package-lock.json 378KB
共 47 条
- 1
善音
- 粉丝: 21
- 资源: 4611
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- yolo目标检测项目实验
- downloadFile-1.hc
- Centos7.9环境下离线安装开源版Nginx(亲测版)
- C++课程设计:基于Qt的航班信息管理系统
- ADS7822UVerilog驱动,前面传的有点问题
- 基于python的高性能爬虫程序,使用了多线程+缓存+xpath实现的,这里以彼-岸图库为例,实现,仅用于学习交流
- 中分辨率成像光谱仪(MODIS)烧毁面积产品信息MODIS-C6-BA-User-Guide-1.2.pdf
- Screenshot_20240427_172613_com.huawei.browser.jpg
- 关于学习Python的相关资源网站链接及相关介绍.docx
- (HAL库)基于STM32F103C8T6的温控PID系统[Dht11、ESP8266、无线透传、L298N……]
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0