add slide functionality

js/components/ascribe_slides_container/slides_container.js

@@ -34,11 +34,25 @@ let SlidesContainer = React.createClass({
         });
     },
 
+    // We let every one from the outsite set the page number of the slider,
+    // though only if the pageNum is actually in the range of our children-list.
+    setPageNum(pageNum) {
+        if(pageNum > 0 && pageNum < React.Children.count(this.props.children)) {
+            this.setState({
+                pageNum: pageNum
+            });
+        } else {
+            throw new Error('You\'re calling a page number that is out of range.');
+        }
+        console.log(this.state);
+    },
+
     // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
     // Also, a key is nice to have!
     renderChildren() {
         return ReactAddons.Children.map(this.props.children, (child, i) => {
             return ReactAddons.addons.cloneWithProps(child, {
+                className: 'ascribe-slide',
                 style: {
                     width: this.state.containerWidth
                 },
@@ -56,7 +70,7 @@ let SlidesContainer = React.createClass({
                     className="container ascribe-sliding-container"
                     style={{
                         width: this.state.containerWidth * React.Children.count(this.props.children),
-                        transform: this.state.containerWidth * this.state.pageNum
+                        transform: 'translateX(' + (-1) * this.state.containerWidth * this.state.pageNum + 'px)'
                     }}>
                         <div className="row">
                             {this.renderChildren()}

js/components/register_piece.js

@@ -131,11 +131,15 @@ let RegisterPiece = React.createClass( {
         return null;
     },
 
+    changePage() {
+        this.refs.slidesContainer.setPageNum(1);
+    },
+
     render() {
         return (
-            <SlidesContainer>
-                <div className={'ascribe-slide'}>
-                    <h3 style={{'marginTop': 0}}>Lock down title</h3>
+            <SlidesContainer ref="slidesContainer">
+                <div>
+                    <h3 style={{'marginTop': 0}} onClick={this.changePage}>Lock down title</h3>
                     <Form
                         ref='form'
                         url={apiUrls.pieces_list}
@@ -196,7 +200,7 @@ let RegisterPiece = React.createClass( {
                         <hr />
                     </Form>
                 </div>
-                <div className={'ascribe-slide'}>
+                <div>
                     chellas
                 </div>
             </SlidesContainer>