Slider sliding

src/js/components/GridSlider.js

@@ -1,28 +1,58 @@
 
 import React, { PropTypes } from 'react'
+import FontAwesome from 'react-fontawesome'
 import GridItem from './GridItem'
 
 export default class GridSlider extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
+
+		this._pagelimit = 3
+
+		this.state = {
+			page: 0
+		}
+	}
+
+	next(){
+		if (this.state.page >= this._pagelimit) return false
+		this.setState({ page: this.state.page + 1 })
+	}
+
+	previous(){
+		if (this.state.page <= 0) return false
+		this.setState({ page: this.state.page - 1 })
 	}
 
 	render(){
 		if( this.props.tracks ){
-			var className = "grid-slider"
+
+			var className = "grid-slider-wrapper"
 			if( this.props.className ) className += ' '+this.props.className
+
+			var style = {
+				left: '-'+(this.state.page * 100)+'%'
+			}
+
 			return (
 				<div className={className}>
-					<div className="grid artist-grid liner">
-						{
-							this.props.tracks.map(
-								(track, index) => {
-									var item = Object.assign({}, track.album, { artists: track.artists })
-									return <GridItem item={item} key={index} link={global.baseURL+'album/'+track.album.uri} />
-								}
-							)
-						}
+					{ this.props.title ? this.props.title : null }
+					<div className="controls">
+						<FontAwesome name="chevron-left" disabled={this.state.page <= 0} onClick={ () => this.previous() } />
+						<FontAwesome name="chevron-right" disabled={this.state.page >= this._pagelimit} onClick={ () => this.next() } />
+					</div>
+					<div className="grid-slider">
+						<div className="grid artist-grid liner" style={style}>
+							{
+								this.props.tracks.map(
+									(track, index) => {
+										var item = Object.assign({}, track.album, { artists: track.artists })
+										return <GridItem item={item} key={index} link={global.baseURL+'album/'+track.album.uri} />
+									}
+								)
+							}
+						</div>
 					</div>
 				</div>
 			);

src/js/views/discover/Discover.js

@@ -28,12 +28,8 @@ class Discover extends React.Component{
 				{
 					this.props.discover.map(
 						(discover, index) => {
-							return (
-								<div className="grid-slider-wrapper" key={index}>
-									<h4>Because you listened to <ArtistSentence artists={discover.seed.artists} /></h4>
-									<GridSlider tracks={discover.tracks} />
-								</div>
-							)
+							var title = <h4>Because you listened to <ArtistSentence artists={discover.seed.artists} /></h4>
+							return <GridSlider title={title} tracks={discover.tracks} key={index} />
 						}
 					)
 				}

src/scss/components/_grid-slider.scss

@@ -1,12 +1,37 @@
 
 .grid-slider-wrapper {
 	padding-bottom: 10px;
+	position: relative;
+
+	.controls {
+		position: absolute;
+		top: -5px;
+		right: 0;
+
+		.fa {
+			display: inline-block;
+			padding: 8px;
+			margin-left: 2px;
+			cursor: pointer;
+			opacity: 0.5;
+			@include animate();
+
+			&[disabled] {
+				opacity: 0.2;
+				cursor: not-allowed;
+			}
+
+			&:hover {
+				opacity: 1;
+			}
+		}
+	}
 
 	.grid-slider {
 		position: relative;
 		overflow-x: hidden;
 		overflow-y: hidden;
-		height: 22vw;
+		height: 17vw;
 
 		.has-touch-events & {
 			overflow-x: scroll;
@@ -18,6 +43,7 @@
 			left: 0;
 			width: 400%;
 			box-sizing: border-box;
+			@include animate();
 
 			.grid-item {
 				width: 4%;
@@ -28,7 +54,7 @@
 
 	@include responsive( $bp_medium ){
 		.grid-slider {
-			height: 21vw;
+			height: 23vw;
 		}
 	}