Slider using the React addon ReactCSSTransition
Css
Js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; class App extends React.Component { constructor(props) { super(props); this.state = { images: [ 'https://images.pexels.com/photos/595229/pexels-photo-595229.jpeg' ], items: [ 'https://images.pexels.com/photos/595229/pexels-photo-595229.jpeg', 'https://static.pexels.com/photos/325288/pexels-photo-325288.jpeg', 'https://static.pexels.com/photos/220201/pexels-photo-220201.jpeg' ], count: 0, direction: '' }; } scrollRight() { let newItems = this.state.images.slice(); newItems.splice(0, 1, this.state.items[this.state.count]); this.state.count == this.state.items.length - 1 ? this.setState({images: newItems, count: 0, direction: 'right' }) : this.setState({images: newItems, count: this.state.count + 1, direction: 'right'}); }; scrollLeft() { let newItems = this.state.images.slice(); newItems.splice(0, 1, this.state.items[this.state.count]); this.state.count == 0 ? this.setState({images: newItems, count: this.state.items.length - 1, direction: 'left' }) : this.setState({images: newItems, count: this.state.count -1, direction: 'left'}); }; render() { return( <div id='slider'> <aside onClick={this.scrollLeft.bind(this)} id='leftArrow' /> <ReactCSSTransitionGroup transitionName="slide" transitionEnterTimeout={2000} transitionLeaveTimeout={2000}> <img key={this.state.images} src={this.state.images} id={this.state.direction} /> </ReactCSSTransitionGroup> <aside onClick={this.scrollRight.bind(this)} id='rightArrow'/> </div> ) } } ReactDOM.render(<App />, document.querySelector('#app')); |
Source: https://codepen.io/jacoboakley/pen/XMJoNY
No comments:
Post a Comment