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
50 responses to “33: How to create a rotating banner using JavaScript – Learn JavaScript front-end programming”
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;
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.
The link is no longer available 🙁
Thank you so much sir
The link to the lesson files is broken. Can we get an update?
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.
how to add them progress buttons?
Code doesn't work.
this code fucking messed up wtf dude ?
You didn't mention how to put the text on the images. Link doesn't work either.
can we use querySelector instead of getElementById when calling classes from html?
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!
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.
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
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;
}
}
Anyone have the code for the back function ?????
Thanks a lot, awesome tutorial.
So!!! Helpful! Just What I Need!
Thank you very much!!!
Daniel your link for the lesson file does not work
hey it's not sliding me properly, help me?
this is only basic image slider. What a title you wrote.
the link is not working. i try but i can not solve the problem of prev button. please help me in Bannerloop2 ();
Hi! Very helpfull but please how can i use the both image and video in this banner?
Why no answer for the questions asked for link not working :/
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?
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
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?
plz could any body send me the source code at abbassgaith@gmail.com
How we connect this banner with database and then apply update features using PHP MySQL
Please help
hey! link in the description is not working, please fix that
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
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.
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
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
THE LINK DOESN'T WORK !!!!!!!!!!!!!!!!!!!!!!
The link is off, I don't know how to fix the left function
We don't need the zIndex part to make this work.
The link is no longer available 🙁
So confusing 😀
Hi Daniel, I can't find the lesson files on Patreon only JS 1,2,3,4,34,35 but no 33
Authentication is required for downloading the lesson files…… Could you please provide the user name and password？
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?
Thanks for this…one can u help me for like slider with animation on caption….hopefully
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
Thank you for the video
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!
<3
bannerStatus = 1;
if(bannerStatus === 1) — BAD
better: bannerStatus = true;
if(bannerStatus)
why var ? not let