Slideshow Example in React Js fully customizable..
import React, { Component } from 'react';
import { Container, Row, Col, CardGroup, Card, CardBody, Button, Input,
InputGroup, InputGroupAddon ,Label} from 'reactstrap';
InputGroup, InputGroupAddon ,Label} from 'reactstrap';
const sqaureStyle1 = {
width: 5,
height: 5,
background: "blue",
marginRight: 5,
cursor: "pointer"
}
const sqaureStyle = {
width: 5,
height: 5,
background: "lightgray",
marginRight: 5,
cursor: "pointer"
}
const buttonStyle = {
background: "transparent", border: "1px solid blue", color: "blue"
}
const divStyle = {
fontSize: "large", width: "90%", padding: 20, background: "#e1e1e1"
}
class DummyComponent extends Component {
constructor(props) {
super(props);
this.state = {
slide: 1,
list: [],
};
this.SubmitDocs = this.SubmitDocs.bind(this);
}
componentWillMount(){
this.counter()
}
counter() {
setTimeout(() => {
if (this.state.slide < 5) {
this.setState({
slide: this.state.slide + 1
})
this.counter()
} else{
this.setState({
slide: 1
})
this.counter()
}
}, 1000)
}
SubmitDocs(ch) {
this.setState({
slide: ch
})
}
renderSlides(ch) {
return <div style={divStyle}>
<p>You are on page {ch} sliden: {this.state.slide} </p>
<Button style={buttonStyle}>READ MORE ></Button>
</div>
}
render() {
console.log(this.state.slide)
return (
<div style={{ marginTop: 60, textAlign: "center" }}>
<div style={{ fontSize:50 }}>
SlideShow Example
</div>
<div style={{ display: "flex", marginBottom: 20 }}>
<div style={{ fontSize: 25, width: "5%", color: "blue",
paddingTop: "8%", cursor: "pointer" }} onClick={() =>
this.state.slide !== 1 ?
this.SubmitDocs(this.state.slide - 1) : null} >
<i className="fa fa-angle-left fa-lg mt-4" style={{ fontWeight: "bold" }}></i></div>
<i className="fa fa-angle-left fa-lg mt-4" style={{ fontWeight: "bold" }}></i></div>
{this.renderSlides(this.state.slide)}
<div style={{ fontSize: 25, width: "5%", color: "blue",
paddingTop: "8%", cursor: "pointer" }} onClick={() =>
paddingTop: "8%", cursor: "pointer" }} onClick={() =>
this.state.slide !== 5 ? this.SubmitDocs(this.state.slide + 1)
: null} ><i className="fa fa-angle-right fa-lg mt-4" style={{ fontWeight: "bold" }}>
</i></div>
: null} ><i className="fa fa-angle-right fa-lg mt-4" style={{ fontWeight: "bold" }}>
</i></div>
</div>
<div>
<div style={{ display: "flex", justifyContent: "center" }}>
<div style={this.state.slide == 1 ? sqaureStyle1 : sqaureStyle}
onClick={() => this.SubmitDocs(1)}></div>
onClick={() => this.SubmitDocs(1)}></div>
<div style={this.state.slide == 2 ? sqaureStyle1 : sqaureStyle}
onClick={() => this.SubmitDocs(2)}></div>
onClick={() => this.SubmitDocs(2)}></div>
<div style={this.state.slide == 3 ? sqaureStyle1 : sqaureStyle}
onClick={() => this.SubmitDocs(3)}></div>
onClick={() => this.SubmitDocs(3)}></div>
<div style={this.state.slide == 4 ? sqaureStyle1 : sqaureStyle}
onClick={() => this.SubmitDocs(4)}></div>
onClick={() => this.SubmitDocs(4)}></div>
<div style={this.state.slide == 5 ? sqaureStyle1 : sqaureStyle}
onClick={() => this.SubmitDocs(5)}></div>
onClick={() => this.SubmitDocs(5)}></div>
</div>
</div>
</div>
)
}
}
export default DummyComponent;
Comments
Post a Comment