• Thursday , 22 August 2019

33: How to create a rotating banner using JavaScript – Learn JavaScript front-end programming

Code Canyon



How to create a rotating banner using JavaScript – Learn JavaScript front-end programming. In this lesson we will learn how to create a rotating banner from scratch using JavaScript.

Download lesson files: http://mmtuts.net/course.php?c=js&l=33

mmtuts is a YouTube channel that focuses on teaching beginner and advanced courses in various multimedia related skills.
We plan to make tutorials available on programming, video production, animation, graphic design, and on software such as the Adobe Creative Cloud programs.

JavaScript for beginners is a how to series that teaches the JavaScript coding language to people who are just starting out learning programming. The course teaches how JavaScript scripting can be made easy and teaches how to build many features on websites through behavior using JavaScript. Creating behavior on websites with JavaScript is easy and should not be seen as otherwise, which is why we want to explain the language in a easy to understand way for beginners.

If you have suggestions on new courses, or specific lessons within existing courses you would like to see, then feel welcome to submit them in the comment section or in a private message. ALL suggestions will be seen, but not all will be replied to since we get quite a few every day.

Original source

3d Ocean

Related Posts

50 Comments

  1. Võ MC
    August 14, 2019 at 15:39

    I have 7 image, i want to slide it but i have no idea for index let it run.please help me.
    function bannerLoop() {

    if (bannerStatus === 1) {

    document.getElementById("imgban2").style.opacity = "0";

    setTimeout(function() {

    document.getElementById("imgban1").style.right = "0px";

    document.getElementById("imgban1").style.zIndex = "1000";

    document.getElementById("imgban2").style.right = "-1200px";

    document.getElementById("imgban2").style.zIndex = "";

    document.getElementById("imgban3").style.right = "px";

    document.getElementById("imgban3").style.zIndex = "";

    document.getElementById("imgban4").style.right = "px";

    document.getElementById("imgban4").style.zIndex = "";

    document.getElementById("imgban5").style.right = "px";

    document.getElementById("imgban5").style.zIndex = "";

    document.getElementById("imgban6").style.right = "px";

    document.getElementById("imgban6").style.zIndex = "";

    document.getElementById("imgban7").style.right = "px";

    document.getElementById("imgban7").style.zIndex = "500";

    }, 500);

    setTimeout(function() {

    }, 1000);

    document.getElementById("imgban2").style.opacity = "1";

    bannerStatus = 2;

    } else if (bannerStatus === 2) {

    document.getElementById("imgban3").style.opacity = "0";

    setTimeout(function() {

    document.getElementById("imgban2").style.right = "0px";

    document.getElementById("imgban2").style.zIndex = "1000";

    document.getElementById("imgban3").style.right = "-1200px";

    document.getElementById("imgban3").style.zIndex = "";

    document.getElementById("imgban4").style.right = "px";

    document.getElementById("imgban4").style.zIndex = "";

    document.getElementById("imgban5").style.right = "px";

    document.getElementById("imgban5").style.zIndex = "";

    document.getElementById("imgban6").style.right = "px";

    document.getElementById("imgban6").style.zIndex = "";

    document.getElementById("imgban7").style.right = "px";

    document.getElementById("imgban7").style.zIndex = "";

    document.getElementById("imgban1").style.right = "px";

    document.getElementById("imgban1").style.zIndex = "500";

    }, 500);

    setTimeout(function() {

    }, 1000);

    document.getElementById("imgban3").style.opacity = "1";

    bannerStatus = 3;

  2. Jackie Goertz
    August 14, 2019 at 15:39

    Does anyone know if there's a way to make this rotating banner change size with the size of the browser window? I've been playing around with it and so far I've been able to make everything on my site move and resize with the window browser except the actual images inside the slide show.

  3. Sanni Chiang
    August 14, 2019 at 15:39

    The link is no longer available 🙁

  4. AMM Safwan
    August 14, 2019 at 15:39

    Thank you so much sir

  5. James McLain
    August 14, 2019 at 15:39

    The link to the lesson files is broken. Can we get an update?

  6. Monika Ludwikowska
    August 14, 2019 at 15:39

    How do you make a slideshow for only two photos? I have a problem with it. Contrary to appearances, the matter is not so obvious.

  7. bobobo boboboo
    August 14, 2019 at 15:39

    how to add them progress buttons?

  8. Leprechaun
    August 14, 2019 at 15:39

    Code doesn't work.

  9. Sad ToxicPepe
    August 14, 2019 at 15:39

    this code fucking messed up wtf dude ?

  10. Rocio Bruna
    August 14, 2019 at 15:39

    You didn't mention how to put the text on the images. Link doesn't work either.

  11. Lisandro Laman
    August 14, 2019 at 15:39

    can we use querySelector instead of getElementById when calling classes from html?

  12. Z Kerr
    August 14, 2019 at 15:39

    Like a lot of other people, I am trying to get the reverse loop just right. I have it to the point where it is working most of the time, but sometimes it does the wonky flip as seen in the video when switching directions and when it resumes the loop on mouse leave. The link is still broken and I'm pretty sure his site doesn't exist anymore unfortunately, either that or I just can't find it. Any help with this would be greatly appreciated, Daniel. I love your content!

  13. TheRaptor1967
    August 14, 2019 at 15:39

    I'm a total noob to js (never used it locally before), but not a noob to programming (VBA pascal, database stuff, some html and css).
    What infrustructure does this rely on to work?
    I'm using MS Expression Web 4 , I've typed in exactly what you have shown in the css and the html page, trying to understand as much as I can as I go, but making sure I have everything char perfect. I then preview in the likes of Chrome and …nothing. Blank page all the way through the tutorial.
    I realize I have kinda jumped into the middle of a tutorial series, and while my learning pure html and css examples (tests) have been working as expected, I get Nudda on this. Is there something I'm missing? I'm assuming the issue is js because if I put a simple <p>hello world</p> in the html body that works fine. Running Windows 10, guessing I'm missing something to do with java script back end support. Also what software do you recommend for coding? I'm using Expression Web 4 but as its old and no longer updated (I think) i'm sure there are better environments.

  14. Irina Penzina
    August 14, 2019 at 15:39

    Hello! I implemented this slider on my website imirina.com. But I cannot make it work properly. Check out my question on Stack Overflow https://stackoverflow.com/questions/53878617/slider-on-javascript-after-clicking-on-the-left-arrow-if-i-take-mouse-out-or-cli

  15. Lotryas
    August 14, 2019 at 15:39

    I've done it this way (back button works!):

    var sliderStatus = 1;

    var sliderTimer = 3000;

    window.onload = sliderLoop();

    var startSliderLoop = setInterval(sliderLoop, sliderTimer);

    document.getElementById('slider').onmouseenter = function() {

    clearInterval(startSliderLoop);

    };

    document.getElementById('slider').onmouseleave = function() {

    startSliderLoop = setInterval(sliderLoop, sliderTimer);

    };

    document.getElementById("btnslider-back").onclick = function() {

    if(sliderStatus == 1) {

    sliderStatus = 2;

    } else if(sliderStatus == 2) {

    sliderStatus = 3;

    } else if(sliderStatus == 3) {

    sliderStatus = 1;

    }

    sliderLoop();

    };

    document.getElementById("btnslider-next").onclick = sliderLoop;

    function sliderLoop() {

    if (sliderStatus == 1) {

    document.getElementById("imgslider1").style.zIndex = "300";

    document.getElementById("imgslider1").style.right = "0px";

    document.getElementById("imgslider2").style.zIndex = "100";

    document.getElementById("imgslider2").style.right = "-1200px";

    document.getElementById("imgslider3").style.zIndex = "200";

    document.getElementById("imgslider3").style.right = "1200px";

    sliderStatus = 2;

    } else if (sliderStatus == 2) {

    document.getElementById("imgslider2").style.zIndex = "300";

    document.getElementById("imgslider2").style.right = "0px";

    document.getElementById("imgslider3").style.zIndex = "100";

    document.getElementById("imgslider3").style.right = "-1200px";

    document.getElementById("imgslider1").style.zIndex = "200";

    document.getElementById("imgslider1").style.right = "1200px";

    sliderStatus = 3;

    } else if (sliderStatus == 3) {

    document.getElementById("imgslider3").style.zIndex = "300";

    document.getElementById("imgslider3").style.right = "0px";

    document.getElementById("imgslider1").style.zIndex = "100";

    document.getElementById("imgslider1").style.right = "-1200px";

    document.getElementById("imgslider2").style.zIndex = "200";

    document.getElementById("imgslider2").style.right = "1200px";

    sliderStatus = 1;

    }

    }

  16. Matt Barton
    August 14, 2019 at 15:39

    Anyone have the code for the back function ?????

  17. Sujal Paudel
    August 14, 2019 at 15:39

    Thanks a lot, awesome tutorial.

  18. 任伟
    August 14, 2019 at 15:39

    So!!! Helpful! Just What I Need!

  19. 별자리TV
    August 14, 2019 at 15:39

    Thank you very much!!!

  20. Lanre Bello
    August 14, 2019 at 15:39

    Daniel your link for the lesson file does not work

  21. chella kutti
    August 14, 2019 at 15:39

    hey it's not sliding me properly, help me?

  22. Nevzat Uz
    August 14, 2019 at 15:39

    this is only basic image slider. What a title you wrote.

  23. AHMAD HASSAN
    August 14, 2019 at 15:39

    the link is not working. i try but i can not solve the problem of prev button. please help me in Bannerloop2 ();

  24. Rooheed Gulistani
    August 14, 2019 at 15:39

    Hi! Very helpfull but please how can i use the both image and video in this banner?

  25. Sobia Shahbaz
    August 14, 2019 at 15:39

    Why no answer for the questions asked for link not working :/

  26. Zahar Alex
    August 14, 2019 at 15:39

    I made both projects with rotating banner and the dropdown menu on a single page, but got a problem with the menu, when i resize the browser the banner is going over the menu. Can you please tell me a solution?

  27. raj sharma
    August 14, 2019 at 15:39

    Nice tutorials, can u please make a tutorial on 4 or 5 column based div slider, but in this tutorials I unable to get ".imgbanbtn-prev" function I am getting some issue in sliding prev btn image. can u send me the final files on this mail id:rajsha0130@gmail.com

  28. Irina Penzina
    August 14, 2019 at 15:39

    I built a reverse slider but now I have a bug. When I test my previous button and on mouse out the first bannerLoop is not running. How to fix it?

  29. Abbas Ghayth
    August 14, 2019 at 15:39

    plz could any body send me the source code at abbassgaith@gmail.com

  30. Shreya Dhar
    August 14, 2019 at 15:39

    How we connect this banner with database and then apply update features using PHP MySQL
    Please help

  31. Zahid Hossain
    August 14, 2019 at 15:39

    hey! link in the description is not working, please fix that

  32. Reflexez
    August 14, 2019 at 15:39

    Can you do a tutorial on how to do a banner /header image that slides/transitions into a different image like this website logo ? http://www.adhamdannaway.com

  33. Martin Mihálik
    August 14, 2019 at 15:39

    Sir, you are awesome!
    This helped me a lot. Everywhere are just bootstrap tutorials of carousels or jquery slideshows. But finally a deep tutorial with vanilla JS. Thank you!! But please reupload the solution of the previous button.

  34. WillyD
    August 14, 2019 at 15:39

    Its a very good tutorial,
    But i think it will be more simple if you using a for loop instead of writing everythin im fuction and calling each other

  35. Ciaran Hoekstra
    August 14, 2019 at 15:39

    Can i use this to make an rotating background image by using document.body.style.backgroundImage ='url(img/1.jpeg)' and then switching between vars

  36. Ayoub Nouamani
    August 14, 2019 at 15:39

    THE LINK DOESN'T WORK !!!!!!!!!!!!!!!!!!!!!!

  37. Edwardes Gomes
    August 14, 2019 at 15:39

    The link is off, I don't know how to fix the left function

  38. Edwardes Gomes
    August 14, 2019 at 15:39

    We don't need the zIndex part to make this work.

  39. erwin demata
    August 14, 2019 at 15:39

    The link is no longer available 🙁

  40. Gabszyztyle Cordero
    August 14, 2019 at 15:39

    So confusing 😀

  41. DarkusChiFPS
    August 14, 2019 at 15:39

    Hi Daniel, I can't find the lesson files on Patreon only JS 1,2,3,4,34,35 but no 33

  42. 任伟
    August 14, 2019 at 15:39

    Authentication is required for downloading the lesson files…… Could you please provide the user name and password?

  43. Jonathon Chambers
    August 14, 2019 at 15:39

    You use function(){ … } a lot, but I can't figure out why. My research tells me this just clears the name space, but that doesn't make sense in your example. What else does it do?

  44. Ali's WebDev
    August 14, 2019 at 15:39

    Thanks for this…one can u help me for like slider with animation on caption….hopefully

  45. Tim Meijer
    August 14, 2019 at 15:39

    Hi Daniël
    Can you help me because when i place this code in the header.php from the video how to make a complete signup system it doens't work

  46. David Hahn
    August 14, 2019 at 15:39

    Thank you for the video

  47. Tom Baldam
    August 14, 2019 at 15:39

    having problems when trying link images via css. It just doesnt seem to work. Ive got my images and the path is correct, they are .png but they just dont seem to work. all i get is a white box. I know that the images work because if I do a simple <img src="imagename"> it works. PLEASE HELP!

  48. Mohammed Riyazuddin
    August 14, 2019 at 15:39

    <3

  49. Михаил Михайлов
    August 14, 2019 at 15:39

    bannerStatus = 1;
    if(bannerStatus === 1) — BAD
    better: bannerStatus = true;
    if(bannerStatus)

  50. Михаил Михайлов
    August 14, 2019 at 15:39

    why var ? not let

Leave A Comment

You must be logged in to post a comment.