Freelance Web Designer Hyderabad: ReactJs Silder with Title and Description

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

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

Freelance Web Designer Hyderabad

Pages

Friday, April 1, 2022

ReactJs Silder with Title and Description

ReactJs Silder with Title and Description

No comments:

Post a Comment