D4mations.com

Simple JavaScript Slideshow In 5 Minutes



Lets build a really simple image slideshow using just Javascript. We will not use any jQuery or fancy libraries, just plain old JavaScript. This is for absolute beginners

Code (fiddle):
https://jsfiddle.net/bradtraversy/74owmd01/
Code (zip):
http://www.traversymedia.com/downloads/simpleslideshow.zip

My Courses:
http://traversymedia.com/eduonix-courses:

Donate – Any donation is greatly appreciated:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KLVYJVNUJ5NV4

Original source

d4mer

, , , ,

44 responses to “Simple JavaScript Slideshow In 5 Minutes”

  3. let slide = document.slide

    let i = 0

    let images = []

    let timeForNextImage = 3000

    images[0] = 'img/image1.jpg'

    images[1] = 'img/image2.jpg'

    images[2] = 'img/image3.jpg'

    images[3] = 'img/image4.jpg'

    images[4] = 'img/image5.jpg'

    function changeImageSlide() {

    if( !images[i] )

    i = 0

    slide.src = images[i++]

    time = setTimeout(changeImageSlide, timeForNextImage)

    }

    changeImageSlide()

  15. thanks bro mine is working but can how to put link on those images
    ?and how can we add some buttons like 1 2 3 for each image so that user can see whatever image they want on the slide. else it will move automatically and that will not be user interactive. From that same process if it was possible then that would be more better! Anyways Great video

  18. Hello!Why it does not work with for loop:
    let images = ["gym2.jpg","gym3.jpg","gym4.jpg"];

    function changeImg(){

    var result;

    for(let i = 0; i<images.length;i++){

    result = images[i];

    }
    document.slide.src =result;
    setTimeout("changeImg()",2000)
    }

    window.onload =changeImg;

  31. Can someone explain why my array is undefined. I copied this perfectly. I get undefined or a blank screen for nearly everything I try to create. Every once in a while I can delete then re-add the exact same thing only to have it "magically work".

Leave a Reply