Awesome And Simple Pure JavaScript-CSS3 Slider

Every web page need some attentions that can only be given by an awesome Slider that will catch your visitors eyes and let them to stay there that will increase your benefits also. So do it but also have to worry about for your back end problems. There are many sliders available on internet but the size are to high that can effect your loading time so think twice before using them.

This JavaScript-CSS Image Slider made by using CSS3 and JavaScript technique, there is no jquery require. It is pretty awesome slider which work on all major browser, including IE versions from IE9 to IE11. This Slider is very easy to customize and ability to add more or less images. It also allow you add text and links into etc into it. It is really Light Weight Slider because it’s didn’t use any kind jquery so it make sure your website should not slow down.

Features:

1.) Pure JavaScript Added.
2.) No External JavaScript Or JQuery File.
3.) Pure CSS3 Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style type="text/css">
body{margin:0;text-align:center;font:200px/500px georgia}
#g {background:#000;margin:0 auto;width:960px;height:500px;overflow:hidden}
#g div{
-webkit-transition:opacity 1s ease-in-out;
-moz-transition:opacity 1s ease-in-out;
-o-transition:opacity 1s ease-in-out;
-ms-transition:opacity 1s ease-in-out;
transition:opacity 1s ease-in-out;
opacity:0;position:absolute;height:500px;width:960px;}
</style>

HTML:

<div id="g">
<div style="background:#090">1</div>
<div style="background:#096">2</div>
<div style="background:#963">3</div>
<div style="background:#CC0">4</div>
</div>

JavaScript:

<script type="text/javascript">
function i() {
c[a].style.opacity = '1'
}

function o() {
c[a].style.opacity = '0'
}
var g = document.getElementById('g'),
c = g.children,
l = c.length - 1,
f = function () {
if (a == l) {
o();
a = 0;
i()
} else {
o();
a++;
i()
}
};
a = 0;
i();
setInterval(f, 4000);
</script>

Customization:

1.) Edit Your HTML & CSS As Per Your Requirments. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…