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 (1 vote cast)
Pure JavaScript SlideShow, 5.0 out of 5 based on 1 rating

4 thoughts on “Pure JavaScript SlideShow

  1. Thanks for sharing.There is a bug with it on internet explorer 7. How do you fix that?

    VA:F [1.9.22_1171]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">