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:


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

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]+”\”/>”;
if (currentIndex == img_list.length)
currentIndex = 0;
function update()
myVar = setInterval(Slider, 5000);


Download Source Code: Download Now

1788total 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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.