ReactJs Silder with Title and Description
Venkat Nagaram
ReactJs Silder with Title and Description
Html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<html> <head> <script src="//fb.me/react-0.13.3.js"></script> <script type="text/jsx" src="script.js"></script> <meta charset="utf-8"> <title>Slider Example</title> </head> <body> <div id="content"></div> </body> </html> |
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 |
.slideShow { display: flex; .previous, .next { display: flex; flex: 0 0 70px; align-items: center; justify-content: center; border-radius: 3px; background-color: #A7383E; color: white; font-size: 20px; font-weight: bold; font-family: serif; cursor: pointer; } .slider { flex: 1; margin: 0 4px; } } .slide { display: none; padding: 16px 12px; border: 1px solid #999; border-radius: 3px; &.show { display: block; } h1 { margin-top: 0; margin-bottom: 4px; } h4 { margin-top: 0; margin-bottom: 4px; } } |
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 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
var slides = [ { title: "Slide Title 1", image: "http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg", description: "description 1" }, { title: "Slide Title 2", image: "http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg", description: "description 2" }, { title: "Slide Title 3", image: "http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image3.jpg", description: "description 3" } ]; var Slider = React.createClass({ getInitialState() { return ( { currentIndex: 0, length: this.props.data.length } ) }, next() { if (this.state.currentIndex < this.state.length - 1) { this.setState({ currentIndex: this.state.currentIndex + 1 }) } else { this.setState({ currentIndex: 0 }) } }, prev() { if (this.state.currentIndex > 0) { this.setState({ currentIndex: this.state.currentIndex -1 }) } else { this.setState({ currentIndex: this.state.length - 1 }) } }, render() { var that = this; var slideNodes = this.props.data.map(function (slide, index) { return( <Slide title={slide.title} image={slide.image} description={slide.description} show={that.state.currentIndex === index} /> ); }); return ( <div className="slideShow"> <a className="previous" onClick={this.prev}>prev</a> <div className="slider"> {slideNodes} </div> <a className="next" onClick={this.next}>next</a> </div> ); } }); var Slide = React.createClass({ render() { var classString = this.props.show ? "slide show" : "slide"; return ( <div className={classString}> <h1> {this.props.title} </h1> <img src={this.props.image} /> <p> {this.props.description} </p> </div> ); } }); React.render( <Slider data={slides}/>, document.getElementById('content') ); |
Source: https://codepen.io/balanandreim/pen/LpXJGJ
