Pure JavaScript SlideShow

By Clain Dsilva October 30, 2012

pure javascript slide showI 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 “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

 

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

 

 

Demo Download Code

VN:F [1.9.22_1171]
Rating: 5.0/5 (2 votes cast)
Pure JavaScript SlideShow, 5.0 out of 5 based on 2 ratings

5 thoughts on “Pure JavaScript SlideShow

Leave a Reply

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