LUCiD GRAFiX Logo

Tutorial
YouTube RSS Feed
Search

TUTORIAL

Simple JavaScript SlideShow

Written by Posted on March 17th, 2013 17 Comments
Share This

This JavaScript slideshow is a simple way of getting the desired result with just modifying the src attribute of the image properties. Lets look more in depth.

This is the HTML and CSS.

This is the JavaScript.

On page Demo

First, we are starting with a window.onload function starting the slideshow using the setInterval. We have 3 variables, one targeting the image ID, one grabbing the image array and one setting the index to 0. In the function changeImage,  we are changing the image src attribute. Using an if statement to tell if the length is greater or equal to, then to reset the imageIndex to 0.

I added a little CSS3 shadow for a cool effect. Also if JavaScript is disabled you still have the original image. (Progressive Enhancement)

Happy Coding!

Check out the Demo! Download files!

About

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

Related Articles You Might Enjoy!

How to use Modernizr SIMPLIFIED How to use Modernizr SIMPLIFIED
jQuery Tip 10 Scroll To Top jQuery Tip 10 Scroll To Top
jQuery Tip 9 Table Striping jQuery Tip 9 Table Striping
Leave a comment

17 Responses

  1. Arnav says:

    Thanks Eric. It was quick and simple to integrate this slideshow. If i want to add slideshow control ( > ), that a user can click to move forward or backward ( < ) – how can i do that ? and also a caption to the slideshow.
    example website:
    http://www.pier1.com/

    Thanks,
    Arnav

  2. Eric Young says:

    Thanks Arnav.
    I looked at the pier1 site and the captions they are using are actually part of the photo and they just wrapped the img in a link. I will put up a tutorial for a slideshow that allows the user the ability to change to the next or previous photo.

  3. Ariel Balter says:

    I have tried implementing this, and I only get to the 2nd image. It does not continue to change images. I’ve tried it in Chrome V30.0 and Firefox V24.0.

    Any suggestions?

    http://arielbalter.com/cio/SlideShowTest.html

  4. Eric Young says:

    Ariel, I took a look at it your sample and I noticed:

    This should be

    Here is a link giving more info on using the setInterval https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
    setInterval(nameOfFunction, 2000) //how often you want it to run.
    I hope this helps, Eric

  5. shabrina says:

    thank you . it really help me :D

  6. MC says:

    Novice here (sorry) – Is there any way to adjust the dimensions of the image?

  7. Eric Young says:

    Hey MC,

    Change the images width and height attributes to match the size of your image.

    In this example I believe I also set a width to the body, so those 2 changes should do it.

    Let me know if you need help.

  8. paul says:

    i have implemented the javascript code into the page i am creating for university and the slideshow will not even start it is just stuck on the first image.

  9. Eric Young says:

    Paul, Can you put a link to your page so I can see why it is not working.

  10. paul says:

    After reading over the code that i typed myself, it had come down to a typing mistake where i made getElementByID plural instead of singular. The code is great. thank you very much

  11. Eric Young says:

    Paul, your very welcome!

  12. Fiona says:

    How do you create multiple slideshows in one js file and then put into html?

  13. Eric Young says:

    Fiona, you could put multiple slideshows using the same id, in the example above anywhere you have an image with the id image it will run the slideshow above. Let me know if this doesn’t answer your question.

  14. I really like what you guys are usually up too. This sort oof clever
    work and exposure! Keep uup the great works guys I’ve added you guys to oour blogroll.

  15. Hey! Do you know if they make any plugins to protect against hackers?
    I’m kinda paranoid about losing everything I’ve worked hard on. Any recommendations?

  16. shobia says:

    thank your eric.., such a very simple code… i like it..,

Leave a Reply