Simple and Light weight Image Slider using CSS & Javascript

Spread the love

Simple and Light weight Image Slider using CSS & Javascript

Their are many flavors present on Web for Image slider for your website, but all of them needs the jquery, which is very heavy framework. hence your site load time is impacted with that….

Code snippet is mentioned below:

HTML Code

<html>
<head>
<link rel=”stylesheet” href=”style.css” media=”screen”>
<script src=”default.js” type=”text/javascript”></script>
</head>
<body onload=”update();”>
<div id=”slider_container”></div>
</body>
</html>

CSS Code

.slider_container {
background-color: blue;
margin: 0 auto;
text-align: center;
position: absolute;
}

JS Code

var currentIndex = 0;
var img_list = [“slider1.jpg”, “slider2.jpg”];
var web_source = “images/”;

function Slider()
{
var test = document.getElementById(“slider_container”);
test.innerHTML = “<img src=\””+web_source+img_list[currentIndex]+”\”/>”;
currentIndex++;
if (currentIndex == img_list.length)
{
currentIndex = 0;
}
}
function update()
{
myVar = setInterval(Slider, 5000);
}

Live Demo| IFSC CODE SLIDER

Download Source Code: Download Now

157total visits,4visits today

This entry was posted in Utils and tagged , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *