Pure JavaScript SlideShow

I have been always fascinated about the slideshows, how do they make one. Well here is the basic slideshow with pure JavaScript. No frameworks are used, No chunks of codes,  Simple Slideshow with 100% pure home grown JavaScript.

Demo Download Code

Lets start with the HTML.

<div id=”show”>
<div id=”slideHolder”>
<img src=”images/slide1.jpg” />
<img src=”images/slide2.jpg” />
<img src=”images/slide3.jpg” />
<img src=”images/slide4.jpg” />
</div>
</div>

• div “show ” – this is where the images are displayed [ fixed width/ height, overflow hidden]
• div “slideHolder” – is the div that holds the slides [relative to "show", images float left]

Here is the CSS

#show{
width:800px;
height:250px;
border:8px solid #E9E9E9;
margin:5px auto;
overflow:hidden;
box-shadow:2px 2px 5px #514F4F;
}
#slideHolder{
width:3200px;
position:relative;
}
#slideHolder img{
float:left;
}

Slide Concept

Use the margin left property to move the slideHolder div inwards show div.  The overflowing part is hidden by the css. A timer function is used to iteratively reduce the margin left , lets call the function as slider(). A function named revert() is used to revert back the margins to its original position.

The JavaScript

var show={};
show.duration = 5000; // Delay between each slides
show.speed = 5; // slide speed [should be even multiples of 5]
show.width = 800; // slide width [should be even number]

function slider(val){
document.getElementById(‘slideHolder’).style.marginLeft=val+’px’;
if(Math.abs(val)%show.width > 0){
val= val-show.speed;
document.getElementById(‘slideHolder’).style.marginLeft=val+’px’;
setTimeout(‘slider(‘+val+’)',1);
}else{
if(Math.abs(val)==(show.width*3)){ // for 4 slides -> [n-1] = 3
setTimeout(‘revrert(‘+val+’)',show.duration);
}else{
val= val-show.speed;
setTimeout(‘slider(‘+val+’)',show.duration);
}
}
}

function revrert(val){ // Quick revert the margin back.
if(Math.abs(val)!=0){
val= val+(show.speed*2); // reverting is twice the speed of slide
document.getElementById(‘slideHolder’).style.marginLeft=val+’px’;
setTimeout(‘revrert(‘+val+’)',1);
}else{initSlider();}
}

function initSlider(){
setTimeout(‘slider(‘+(-5)+’)',show.duration);
}

window.onload = function(){
initSlider();
}

Demo Download Code