Slider using the React addon ReactCSSTransition
Slider using the React addon ReactCSSTransition
Venkat Nagaram
Slider using the React addon ReactCSSTransition
|
1 |
<div id='app'></div> |
Css
|
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
html, body { margin: 0; pading: 0; height: 100%; width: 100%; font-size: 3.5vmin; overflow: hidden; } #app { margin: 0; padding: 0; height: 100%; width: 100%; } img { position: absolute; height: 100%; width: 100%; } /* Right and Left Arrows */ aside { position: absolute; top: 50%; z-index: 1; cursor: pointer; } #leftArrow { left: 1rem; height: 0; width: 0; border-bottom: 2rem solid transparent; border-right:2rem solid black; border-top: 2rem solid transparent; } #rightArrow { right: 1rem; height: 0; width: 0; border-bottom: 2rem solid transparent; border-left:2rem solid black; border-top: 2rem solid transparent; } /* Side Animation */ #left.slide-enter { opacity: 0.01; left: -100%; } #left.slide-enter-active { opacity: 1; left: 0; transition: all 2000ms ease-in; } #right.slide-enter { opacity: 0.01; right: -100%; } #right.slide-enter-active { opacity: 1; right: 0; transition: all 2000ms ease-in; } .slide-leave { opacity: 1; transform: scale(1,1); } .slide-leave-active { opacity: 0.01; transform: scale(0,0); transition: all 2000ms ease-in; } |
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
