Freelance Web Designer Hyderabad: Simple React.js Slider with Slide Effect

Simple React.js Slider with Slide Effect

venkatnagaram-simple-react-js-slider-with-slide-effec

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 */

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

Freelance Web Designer Hyderabad

Pages

Friday, April 1, 2022

Simple React.js Slider with Slide Effect

Simple React.js Slider with Slide Effect

No comments:

Post a Comment