React Screen
A different React carousel component.
Too many boring carousel?
Need a fancy way to show banners?
Get Started
1. Install react-screen.
# Via npm
npm install react-screen

# Via Bower
bower install react-screen
2. Import react & react-screen.
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Screen, ScreenSlice } from 'react-screen';
3. Import stylesheet.
// In jsx
import styles from 'path/to/css/react-screen.css';
<!-- In HTML -->
<link rel="stylesheet" href="path/to/css/react-screen.css">
4. Render it!
            <h1>First Screen</h1>
            <h1>Second Screen</h1>
            <h1>Third Screen</h1>
), document.getElementById('react-screen'));
// Values show below are default.
<Screen style={} sliceHeight={ 60 } delay={ 500 } showSkip={ true }>

// Descriptions
    style: "A React style object. It will apply to every screen."
    sliceHeight: "Unit: vh. Implies each screen's scroll height.",
    	"Unit: ms. When scroll to a new screen, it will disables scroll for a while. 
    	Useful for playing animation.",
    showSkip: "Boolean. Determines whether show a skip button on screen."
You can easily overwrite styles, just use inspect tool to check class names.
react-screen will add class "in" to the screen just entered in, and class "out" to other screens. So you can write your own animation like this: .your-element-class {
    /* In animation */

.react-screen.out .your-element-class {
    /* Out animation */
Issues and Contributing
If you find any bugs or have any advices, please leave an issue. Feel free to make a pull request and wait for accpetance!