How to set Image Slider - html

Question

var Home = React.createClass({
render: function() {
return (
<div>
<img src="images/12.jpg" />
<img src="images/11.jpg" />
<img src="images/13.jpg" />
<img src="images/14.jpg" />
</div>
)
}
})
I need these 4 images as a slider can anyone give me the code using react or html with CSS

Answer 1

Use ready-made library, here example
https://github.com/jossmac/react-images
https://github.com/xiaolin/react-image-gallery
http://kenwheeler.github.io/slick/

Answer 2

First that is not the way to ask a question. Check here how to ask good question.
You can use some of all made React Slider Components, but if you want to do it on your own you can do something like this :
This is only to get the idea :
class Test extends React.Component {
constructor(){
super();
this.state = {
marginLeft: 0
}
}
componentDidMount(){
this.interval = setInterval(this.changeSlide.bind(this), 2000);
}
changeSlide(){
let totalSlides = document.getElementById("inner").children.length - 1;
let getWidth = document.getElementById("slide1").offsetWidth;
let marginLeft = this.state.marginLeft;
if((totalSlides * -getWidth) >= this.state.marginLeft){
marginLeft = 0
}else{
marginLeft = this.state.marginLeft - getWidth
}
this.setState({marginLeft})
}
render(){
return (
<div className="outter">
<div id="inner" className="inner" style={{marginLeft: this.state.marginLeft}}>
<img src="https://cdn.pixabay.com/photo/2016/12/29/16/12/eiskristalle-1938842_960_720.jpg" style={{maxWidth: "100%"}} id="slide1"/>
<img src="https://cdn.pixabay.com/photo/2014/10/16/09/15/frost-490807_960_720.jpg" style={{maxWidth: "100%"}} id="slide2"/>
<img src="https://cdn.pixabay.com/photo/2015/03/01/07/24/winter-654442_960_720.jpg" id="slide3"/>
</div>
</div>
)
}
}
ReactDOM.render(<Test />, document.getElementById('container'));
.outter{
width: 500px;
overflow: hidden;
}
.inner{
width: 1000%;
float:left;
margin-left: 0;
transition: all 1s ease;
}
.inner img{
max-width: 500px;
width: 500px;
float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
In componentDidMount set interval to call the function to change the slide every 2 seconds (in this case).
In function changeSlide first you need to get total slides and the width of the first one (because all have the same width).
Then if it's the last slide set margin-left to 0 and if it's not then subtract the photo width of the current margin-left in the state. At the end update the state.
Hope that this will give you the idea how you can do it.
Here is the fiddle.