reactjs-coverflow-scale

React Coverflow

---

(Inspired from https://github.com/andyyou/react-coverflow)

React Coverflow is a React component for building cover flow style carousel in a convenient way.

Features of reactjs-coverflow

• Flexbox styles of CSS 3.
• Support scroll in the component.
• Support navigation buttons optional
• Using css-module
• Support mobile
• Support different div's size

Getting started

Install reactjs-coverflow using npm.

$ npm install reactjs-coverflow

The required stylesheet using css-module and include in package(js file), so you don't need include other stylesheet.

Usage

Exemple :

var React = require('react');
var Coverflow = require('reactjs-coverflow');

module.exports = React.createClass({
    render: function() {
        return (
            <div>
                <form>
                    <Coverflow ref="coverflow"
                    style={{width: "100vw", height:"500px"}}
                    margin={(this.state && this.state.margin + "px") || undefined}
                    startPosition={4}
                    enableScroll={true}
                    animationSpeed={0.8}>
                        <div style={{width: '150px', height: '150px', backgroundColor: 'pink'}} />
                        <div style={{width: '150px', height: '150px', backgroundColor: 'yellow'}} />
                        <div style={{width: '150px', height: '150px', backgroundColor: 'green'}} />
                        <div style={{width: '150px', height: '150px', backgroundColor: 'orange'}} />
                        <div style={{width: '150px', height: '150px', backgroundColor: 'blue'}} />
                        <div style={{width: '150px', height: '150px', backgroundColor: 'purple'}} />
                        <div style={{width: '100px', height: '150px', backgroundColor: '#000000'}} />
                        <div style={{width: '200px', height: '150px', backgroundColor: 'pink'}} />
                    </Coverflow>

                    <input type="text" name="margin" onChange={this.handleMarginChange} />
                    <button onClick={this.prev} type="button">Prev</button>
                    <button onClick={this.next} type="button">Next</button>
                    <button onClick={this.getPosition} type="button">GetPosition</button>
                    <button onClick={this.goAt} type="button">Go At 5</button>
                </form>
            </div>
        );
    },
    handleMarginChange: function(e) {
        e.preventDefault();
        this.setState({margin: parseFloat(e.currentTarget.value)});
    },
    prev: function(e) {
        e.preventDefault();
        this.refs.coverflow.previous();
    },
    next: function(e) {
        e.preventDefault();
        this.refs.coverflow.next();
    },
    getPosition: function(e) {
        e.preventDefault();
        console.log(this.refs.coverflow.getPosition());
    },
    goAt: function(num, e) {
        e.preventDefault();
        this.refs.coverflow.goAt(4);
    }
});

Options

• startPosition [number]: Start at 0, determine the starting element of your coverflow (default: 0)
• enableScroll [boolean]: Enable scrolling feature. ((default: true)
• margin [string or number (px)]: margin between elements in coverflow (default: USE CSS) !! Don't use margin proprety if you prefer to use media queries, overwrite the CSS and the class .reactjs-coverflow_Element!!
• animationSpeed[string or number (second)]: Speed of animation coverflow in second (default: USE CSS) !! Same that margin !!

Refs

You can get some function of your coverflow with a ref proprety

• next(): go to next slide
• previous(): go to previous slide
• goAt(number): go to {number slide} (Begin at 0 !)
• getPosition(): get position of current slide (Begin at 0)

You can use it to create some button

CSS

.reactjs-coverflow_Main {
    position: relative;
    margin: 0;
    	padding: 0;
    	background-color: rgba(0, 0, 0, 0.1);
    	overflow: hidden;
}

.reactjs-coverflow_Coverflow {
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 500px;
    perspective: 500px;
}

.reactjs-coverflow_Element {
    position: relative;
    -webkit-box-reflect: below 1px -webkit-linear-gradient(bottom,rgba(0,0,0,.6),rgba(0,0,0,.1) 20%,transparent 30%,transparent);
    margin: auto 20px;
    transition: transform 0.7s;
}

You can easely overwrite style propreties.

Major Update

• Since 1.0.0 : react-coverflow-X is replace to reactjs-coverflow in the style.

Minor Update

• Since 1.1.0 : Lodash dependencies has been removed.

Contributors

• Bastorx

Use Github issues for requests

reactjs-coverflow is a community project and wouldn't be what it is without contributions! We encourage and support contributions. The reactjs-coverflow source code is released under the MIT License.

Feel free to fork and improve/enhance reactjs-coverflow any way you want. If you feel that reactjs-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.

$npm install --dev

# Build component to lib/
$ npm run build

# Build source of site
$ npm run build-test

# Run test-server (default port: 3001)
$ npm run dev

# You can run all this command with the following command:
$ npm run dev

PS: In development, gulp is installed and watch the code. It automatically rebuild when you use npm run dev.