ReactJs Simple Silder with Arrows
ReactJs Simple Silder with Arrows
Venkat Nagaram
ReactJs Simple Silder with Arrows
|
1 |
Html
|
1 2 3 4 |
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div id="slider"></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 |
.slider{ font-family: 'Roboto Condensed', sans-serif; width: 100%; height: 40vw; position: relative; overflow: hidden; &__slide{ transition: all .4s ease-in-out; transform: scale(1.1); position: absolute; top: 0; left: 0; width: 100%; height: 40vw; max-height: 600px; min-height: 200px; background-size: cover; background-position: center; z-index: 1; opacity: 0; &__text{ position: absolute; top: 20px; left: 20px; background: rgba(0,0,0,.6); a, a:link{ transition: all .3s ease-in-out; color: white; text-decoration: none; text-transform: uppercase; font-size: 32px; padding: 20px; display: block; &:hover{ background: rgba(20,20,20,.4); color: rgb(200,200,200); } } } &[data-active="true"]{ transform: scale(1); z-index: 100; opacity: 1; } } &__next, &__previous{ transition: all .3s ease-in-out; color: rgba(255,255,255,.6); z-index: 200; position: absolute; &:hover{ color: rgba(255,255,255,.8); transform: scale(1.1); } } &__next{ bottom: 20px; right: 20px; } &__previous{ bottom: 20px; left: 20px; } } |
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 |
let slides = [ { background: "https://ununsplash.imgix.net/photo-1434828927397-62ea053f7a35?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050", text: "America", link: "https://unsplash.com/anthonydelanoix" }, { background: "https://images.unsplash.com/photo-1434394673726-e8232a5903b4?q=80&fm=jpg&s=b154bdf22a4885c8e2dd1b845c5fe996", text: "Mountains", link: "https://unsplash.com/aleskrivec" }, { background: "https://images.unsplash.com/photo-1432691301971-c8b920198bd7?q=80&fm=jpg&s=d6b5970179cd2bc77c3b56165da56f80", text: "Shore", link: "https://unsplash.com/intrepid" } ] const Slide = React.createClass({ render: function(){ let background = this.props.background; let text = this.props.text; let link = this.props.link; let active = this.props.active; let slideStyle = { backgroundImage: 'url(' + background + ')' }; return( <div className="slider__slide" data-active={active} style={slideStyle}> <div className="slider__slide__text"><a href={link}>{text}</a></div> </div> ); } }); const Slider = React.createClass({ getInitialState : function(){ return { activeSlide: 0 } }, nextSlide: function(){ let slide = this.state.activeSlide + 1 < this.props.slides.length ? this.state.activeSlide + 1 : 0; this.setState({ activeSlide: slide }); }, previousSlide: function(){ let slide = this.state.activeSlide - 1 < 0 ? this.props.slides.length - 1: this.state.activeSlide - 1; this.setState({ activeSlide: slide }); }, render: function(){ let slides = this.props.slides; return( <div className="slider"> {slides.map((slide, index, array) => < Slide background={slide.background} text={slide.text} active={index === this.state.activeSlide} link={slide.link} /> )} <div className="slider__next" onClick={this.nextSlide}><i className="fa fa-4x fa-arrow-circle-right"></i></div> <div className="slider__previous" onClick={this.previousSlide}><i className="fa fa-4x fa-arrow-circle-left"></i> </div> </div> ); } }); React.render(<Slider slides={slides} />, document.getElementById("slider")); |
Source: https://codepen.io/jjmartucci/pen/MwLxor
