Wed. Dec 4th, 2019

Host your Website

Read and learn

FatCow Web Hosting $1.00/mo* Trust your web hosting to the #1 web host provider, GoDaddy!

Array Slideshow Animation Tutorial JavaScript CSS3 HTML5

1 min read



Lesson Code: http://www.developphp.com/view.php?tid=1380
Learn to program Array based animated slideshows that you can fully customize using HTML, CSS and JavaScript. You can extend the programming to place dynamic server side content into the array, then traverse over a dynamic array as a slideshow. This can also be done using CSS3 keyframes, but it takes more code to accomplish and you cannot use array content.

32 thoughts on “Array Slideshow Animation Tutorial JavaScript CSS3 HTML5

  1. here is the code in this tutorial

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
    <title>Abdibogoreh</title>
    <style type="text/css">
    #wss{
    opacity:0;
    -webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
    }
    </style>
    <script type="text/javascript">
    var wss_i = 0;
    var wss_array = ["Cute","Happy","Playful", "Smart","Loyal"];
    var wss_elem;
    function wssNext(){
    wss_i++;
    wss_elem.style.opacity = 0;
    if(wss_i > (wss_array.length – 1)){
    wss_i = 0;
    }
    setTimeout('wssSlide()',1000);
    }

    function wssSlide(){
    wss_elem.innerHTML = wss_array[wss_i];
    wss_elem.style.opacity = 1;
    setTimeout('wssNext()',2000);
    }
    </script>
    </head>
    <body>
    My dog is <span id="wss"></span>

    <script>
    wss_elem = document.getElementById("wss"); wssSlide();
    </script>

    </body>
    </html>

  2. Hi!! Thanks for the amazing tutorial, I was wondering how I set up the javascript code if I want to link it externaly because is saying that the wss_elem is null….. 🙁

  3. Thanks a lot, can you make a tutorial on how to make more interactive slideshow, like 2 words comes together but in different timing grouped in one function, as image and text, Thanks again

  4. I have 4 different div and 4 button I want switch between dives by buttons [when I click on a button it show me one dive and hide all other div ] plies help….

  5. Great lesson. What if I wanted to combine auto slide with manual using one script. Adding left and right arrows for example so the user can manually move back and forward in the array?

  6. Hello Adam.
    Great tutorial. I wanted to use your ideas to build an image slideshow for my web site. I used php to populate an array with all of the images in a folder, then used your tutorial as a guide to display them. It works, sort of. I get the fade in/fade out effect, but I guess what I'm really looking for is more of a dissolve effect, from one image to another. Any chance you could create a tutorial for this? Thanks again and have a great day!

  7. great vid and thanks, to use a separate js file make sure link is in head section this allows browser to initialise variables but, leave line 32 where it is or at least after the span element. Now works with separate files, again thanks for amazing tut.

  8. I'm trying to get an image up but when I do it it shows the outline of the image but no image shows. I'm trying to add several pictures.
    ['<img src="building.jpg" width="350" height="450">',];

  9. You can use the key word call ( with) as well instead of having another script tag in the body. its just a suggestion. I'm enjoying learning from your vids. Great work mate!! Cheers :)<script>With(document.getElementByID("wss")) innerHTML = wss_array[wss_i];</script>

  10. Hi, thanks for this amazing tut Adam Khoury !
    I`m wondering how I can get a transition from picture into picture, instead of from picture to background to picure !

    best regards

  11. Hi! THX for the tutorial, i made it and it was cool, I meet with an intresting thing. I make some komment and the animation work on a different way (the array was hide for 1 sec)
    "<style> 
    <!– type="text/css"> –>
    <!– wss=world slideshow –>
    #wss{
    opacity:0;
    -webkit-transition:opacity 1.0s linear 0s;
    transition:opacity 1.0s linear 0s;
    }
    </style>"
    What do u think, what is the cause? (Sry for my bad English! Have a nice day!)

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.