This topic going to see how to create image slider using javascript. This method using image slider. we are know many type of image slider. like, some slider image are using html and css. this concept using pure css3 image slider.
See about javascript code. and below see the demo video see the demo download the coding using website. this method very useful and easy to understand way.
Image Slider Code in Html:
<div id="images">
<img id="image1" src="https://i.imgur.com/dL3io.jpg" />
<img id="image2" src="https://i.imgur.com/qASVX.jpg" />
<img id="image3" src="https://i.imgur.com/fLuHO.jpg" />
<img id="image4" src="https://i.imgur.com/5Sd3Q.jpg" />
</div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
</div>
Image Slider Code in Css:
body {
text-align: center;
}
#images {
width: 400px;
height: 250px;
overflow: hidden;
position: relative;
margin: 20px auto;
}
#images img {
width: 400px;
height: 250px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;
transition: all linear 500ms;
-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;
}
#images img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#images img:first-child {
left: 0;
opacity: 1;
}
#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 4px 6px;
color: #222;
}
#slider a:hover {
background: #C6E4F2;
}
0 Comments