• Sunday , 18 November 2018

Javascript Slideshow Tutorial

Code Canyon



Javascript Slideshow made using HTML, Javascript, and Notepad++.

Slideshow with fade-in effects:
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Original source

3d Ocean

Related Posts

34 Comments

  1. Shantanu Gajjar
    December 12, 2017 at 01:09

    I followed your code, and when I refreshed my page, only one of my pictures shows up and it doesn't transition into the next picture like it is supposed to. What do you suggest I do?

  2. swapnil kadam
    December 12, 2017 at 01:09

    Perfect works….Thanks

  3. pumpula
    December 12, 2017 at 01:09

    Hi!
    This is way very helpful 🙂 I have been trying to make this work on my own for hours today but then i finally watched your video and puff IT WORKS!! Thank so much.

  4. InvaderSkitz
    December 12, 2017 at 01:09

    Easiest tutorial I have found, and it works!! Perfect for anyone just learning how to use javascript in html

  5. Georgi Georgiev
    December 12, 2017 at 01:09

    Very useful.
    Thank you.
    GOD bless you and keep you.

  6. Henry Reinhart
    December 12, 2017 at 01:09

    Where do I save every image?! I have three images and I saved it in a separate folder and put it in my desktop. I put the code in that folder too. Do I need to change anything with the code?! Thank you so much :))

  7. Danai Chiotidi
    December 12, 2017 at 01:09

    hello!I watched and wrote the code. in my browser shows only the first image. It does not change

  8. Richie Cunningham
    December 12, 2017 at 01:09

    Hey, this worked for me but I want to put it on my homepage, I did the code in a separate page. When I copy it over to the homepage I can't seem to centre it on the page to flow with the rest of the page, any suggestions? 

  9. WrightechSD
    December 12, 2017 at 01:09

    Sounds like your image paths are incorrect. Double check that your images are in the directory you specify 🙂

  10. Angelebony13
    December 12, 2017 at 01:09

    I'm not sure what I did wrong… When a run the slideshow all I get is an empty box on the webpage.. I copied the text word for word.. Any thoughts on what went wrong?
    It would be greatly appreciated.

  11. WrightechSD
    December 12, 2017 at 01:09

    Your welcome!

  12. Dirwan Adi
    December 12, 2017 at 01:09

    very helpfull thanks

  13. WrightechSD
    December 12, 2017 at 01:09

    Just take your images from the same folder for both, unless I misunderstood the question.

  14. WrightechSD
    December 12, 2017 at 01:09

    Your welcome, thanks for your comment!

  15. DarkArcz
    December 12, 2017 at 01:09

    This was wonderfully to the point – thanks a bunch!

  16. WrightechSD
    December 12, 2017 at 01:09

    JQuery can do most everything easier if you can afford to have the files on your server.

    Thanks for your comments!

  17. WrightechSD
    December 12, 2017 at 01:09

    In my comments I put a link to a web tutorial that explains fade effects.. AKA transitions.

  18. WrightechSD
    December 12, 2017 at 01:09

    Hi, The function is called slides() { } and at the bottom of my code I have the line slides(); which calls the function.

  19. WrightechSD
    December 12, 2017 at 01:09

    Your Welcome, glad I could help!

  20. zzzMuadib
    December 12, 2017 at 01:09

    thank you!!!

  21. john john
    December 12, 2017 at 01:09

    Can you copy and paste the codes in the comment box please?

  22. john john
    December 12, 2017 at 01:09

    Can you copy and paste the codes pleas

  23. WrightechSD
    December 12, 2017 at 01:09

    Your Welcome!

  24. MulcheArcade
    December 12, 2017 at 01:09

    very helpful, thank you for the upload

  25. WrightechSD
    December 12, 2017 at 01:09

    Your welcome!

  26. MessalinaK
    December 12, 2017 at 01:09

    It worked, thank you:)

  27. WrightechSD
    December 12, 2017 at 01:09

    Do you mean going to 3 then back to 1? (1,2,3,2,1)

    If this is what you meant then you would simply have one more variable that keeps track of your order, if the slides are going 3 to 1 then pic– or if slides are going 1 to 3 pic++.

  28. MessalinaK
    December 12, 2017 at 01:09

    Thanks for very helpful tutorial! Is there any way to do reverse slideshow? I mean sliding the pictures 3, 2, 1 instead for 1, 2, 3?

  29. WrightechSD
    December 12, 2017 at 01:09

    The pictures must be in the same folder as your html file OR in a folder specified in the code.. for example:

    images/pic1.png

    Your image "pic1.png" is in the images folder. The images folder is in the same folder as your html document.

  30. WrightechSD
    December 12, 2017 at 01:09

    Your welcome!

  31. morrisonr89
    December 12, 2017 at 01:09

    very hellpful, thank you !!!

  32. WrightechSD
    December 12, 2017 at 01:09

    Hi HockeyStar,

    There are ways of doing fade-in effects, but it requires a modification to my code structure.

    I put a link to a good example of what your looking for in my video description.

  33. WrightechSD
    December 12, 2017 at 01:09

    Your welcome, thanks for the feedback.

  34. GreatG0dOm
    December 12, 2017 at 01:09

    Helpful. Thanks.

Leave A Comment

You must be logged in to post a comment.