Freelance Web Designer Hyderabad: ReactJs Simple Silder with Arrows

ReactJs Simple Silder with Arrows

venkatnagaram-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;
  }
}

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

Freelance Web Designer Hyderabad

Pages

Friday, April 1, 2022

ReactJs Simple Silder with Arrows

ReactJs Simple Silder with Arrows

No comments:

Post a Comment