Simple Image Slider CSS,HTML, JS

Simple Image Slider for you we page and web application. In this have simple css, js script and HTML code only. You can easily added to your web application.Its very light weight slider.You can see the demo below and also you can download the source code below by click the link.

Click Here for Demo

JS Code:

$(function() {
$("#simple-slider > div:gt(0)").hide();
setInterval(function() {
$('#simple-slider > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#simple-slider');
},  3000);
});

CSS Code:

#simple-slider {
position: relative;
width: 500px;
height: 300px;
padding: 10px;
/* box-shadow: 0 0 20px rgba(199, 199, 199, 0.4); */
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 2px #8C8C8C, inset 0px 0px 0px #CBCBCB;
border: 1px solid #C0C0C0;
}
#simple-slider > div {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
}
#simple-slider > div > img{
width:510px;
height:310px;
}

HTML Code:

<div id="simple-slider">
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UiFPkrSxzKf84-sPPrxjOBqHBqHYp9HYYdXMvHdITEwWAs660sLK59wbPkt9uUlzmPxpGTrQdTqk648f2EoU7MnFEHeQtQWP7sD1P6Y_n_qB4A6CZ5Bc4NgJa_WrRJQHKKHGhDU-W5bZ/s1600/3edc_Beautiful-love-wallpaper-12-530x300.jpg">
</div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMuQjpzSkCc3YW5HAu3WCujOpjp_e3IWY19CD-M4iRIX1s9h4tTweytcVFwZQ8KEkJNwa15PxlPcfaLXNwnyopDv5wXQQoZmZJ48eX462sRNEmwAFtIijhTDT6SE7Ws_sAq4kWbvnT2id/s1600/Android_Wallpaper-530x300.jpg">
</div>
<div>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7G8HV6mhwfq090uo6DKzGaUgq7Pd3ehQz8Hq6au1GN2G3fXk0l1mrLt4jm3NJusuWhDyxdocOkVvjGFzf0eq49HS6IcfCfBVblhUz2fMoIG6cKpqDiGzoOBYu5El1GK7rv8jzXFGtvbG2/s1600/clouds-sky-530x300.jpg">
</div>
</div>

Share on Facebook Share on Twitter