Simple React.js Slider with Slide Effect
Simple React.js Slider with Slide Effect
Venkat Nagaram
Simple React.js Slider with Slide Effect
Html
|
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 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
* { padding: 0; margin: 0; box-sizing: border-box; list-style: none; } body, html { width: 100%; height: 100%; font-family: arial; background: #2A2C2E; } #app { width: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; } .slider-wrapper { width: 400px; height: 250px; border: 1px solid #333; overflow: hidden; border-radius: 4px !important; } .slider { width: 2000px; } .slider-item { float: left; position: relative; text-transform: uppercase; color: #fff; line-height: 250px; font-size: 20px; background: #383838; text-align: center; border-radius: 4px !important; transition: all .2s linear; } .hide { @extend .slider-item } .buttons-wrapper { width: 400px; display: flex; justify-content: space-between; position: absolute; top: 50%; margin-top: -15px; } .buttons-wrapper .prev-button { background-image: url(http://static.birgun.net/static/images/slider-arrow-left.svg); background-size: 100%; background-color: rgba(0, 0, 0, 0.2); height: 30px; width: 30px; border-radius: 4px; color: #fff; border: none; cursor: pointer; outline: none; transition: all 0.2s linear; } .buttons-wrapper .next-button { background-image: url(http://static.birgun.net/static/images/slider-arrow-right.svg); @extend .prev-button; } .buttons-wrapper button:hover { background-color: rgba(0, 0, 0, 0.4); } /* indicators */ .indicators { width: 400px; position: absolute; bottom: -4px; z-index: 2 !important; text-align: center; } .indicators li { display: inline-block; margin-right: 5px; width: 12px; height: 12px; font-size: 16px; line-height: 30px; border-radius: 100%; text-align: center; background-color: rgba(255, 255, 255, 0.8); color: #333; text-indent: -9999px; cursor: pointer; transition: all 0.2s linear; } .indicators li:last-child { margin-right: 0; } .active-indicator { background: rgba(0, 0, 0, 0.3) !important; color: #fff !important; } /* indicators */ |
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
var Slider = React.createClass({ getInitialState: function() { return { slider: ["first", "second", "third", "fourth", "fifth"], activeIndex: 1, left: 0 } }, prevSlide: function() { this.setState({ activeIndex: this.state.activeIndex - 1, left: this.state.left + 400 // this.props.sliderWidth not working for some reason }) if (this.state.activeIndex === 1) { this.setState({ activeIndex: this.state.activeIndex + this.state.slider.length - 1, left: this.state.left - this.props.sliderWidth * (this.state.slider.length - 1) }) } }, nextSlide: function() { this.setState({ activeIndex: this.state.activeIndex + 1, left: this.state.left - this.props.sliderWidth }) if (this.state.activeIndex === this.state.slider.length) { this.setState({ activeIndex: this.state.activeIndex - this.state.slider.length + 1, left: 0 }) } }, clickIndicator: function(e) { this.setState({ activeIndex: parseInt(e.target.textContent), left: this.props.sliderWidth - parseInt(e.target.textContent) * this.props.sliderWidth }) }, render: function() { var style = { left: this.state.left, width: this.props.sliderWidth, height: this.props.sliderHeight }; return ( <div> <div className="slider-wrapper"> <ul className="slider"> {this.state.slider.map(function(item,index) { return ( <li style={style} className={index+1 === this.state.activeIndex ? 'slider-item' : 'hide'}>{item}</li> ) },this) } </ul> </div> <div className="buttons-wrapper"> <button className="prev-button" onClick={this.prevSlide}></button> <button className="next-button" onClick={this.nextSlide}></button> </div> <div className="indicators-wrapper"> <ul className="indicators"> {this.state.slider.map(function(item,index) { return ( <li className={index+1 === this.state.activeIndex ? 'active-indicator' : ''}onClick={this.clickIndicator}>{index+1}</li> ) },this) } </ul> </div> </div> ); } }); // render ReactDOM.render( <Slider sliderWidth="400" sliderHeight="250"/>, document.getElementById("app") ); |
Source : https://codepen.io/mburakerman/pen/LbBwWo
