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

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.

--

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.

[noahmwanza]

I love your explaination thanks alot continue changing the world with your purpose.

[BennyLovesRAGEHey]

This was great. You are so clear. Thanks a million

[bahmankardan]

Great tutorial. Thanks for sharing them.

[melindalobo]

what will be the style.right and style.zIndex if there are 5 images ?

[neil]

this was so good. love the projects and exercises. best on youtube.

[martinmihalik]

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.

[jcltradingcompany]

MMTUS - Daniel, can you please upload the tutorials on JavaScript Regular Expressions - Your tutorial is simply superb. I very well understand with the way you explain. Thanks for all your videos here.

[laurentiudobrescu]

It's awesome, a very good tutorial, big like !

[demn]

Love your videos!!. You explain everything very well. your channel should have more subscribers!!

[legionsman]

Can you do something where I can create my own messages in the banner? Can the banner pull in data from a database through a stored procedure? I want to be able to change them when I have information to present.

[codinginjs]

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

[rooheedgulistani]

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

[TheRaptor]

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.

[san_tient]

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

[zkerr]

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!

[jonydude]

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?

[monikaludwikowska]

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.

[andewtheo]

the download lesson files link doesn't work, keeps sending me to random job application sites.

[laszlohadhazi]

Hi Daniel! I was looking for useable php video for long... finally I found your work on youtube. I went trough every single one!! You always make really good quality tutorials! Now I'm following your javascript collections too. Thanks all your work, very well explained!
I was working something similar like your rotating banner, and working well on chrome but not on safari... Do you have any idea ?

[timmeijer]

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