On September 14th, 2017, we published revised versions of our Privacy Policy, Terms of Service and Website Use Policy and published a Cookie Policy. Your continued use of Lynda.com means you agree to these revised documents, so please take a few minutes to read and understand them.

- So now that we've injected a navigation container…into our marquee,…now we're going to go through and create a navigation…element, or a button, for each panel in our data.…So let's go back to our JavaScript file.…Let's go down and find the marqueeMultiPanel.…Let's hit a few returns.…What we're going to do here is use a for loop…to loop through all of the data and total panels…and create a navigation element for each one of those.…So this is a standard JavaScript function.…So we'll type for, beginning and ending parenthesis,…beginning and ending bracket,…split this open on the brackets.…

Now inside of the parenthesis for a for loop…we're going to set three parameters.…First is going to be a variable called i…which will stand for index.…We're going to set that equal to zero,…then a semicolon, then a space.…Next we're going to test that variable…to see if that variable is less than.…Let's come up and get marqueeVars.…marqueeVars.totalPanels…semicolon then a space…then we're going to iterate that index…which means we're going to take the letter i…

Resume Transcript Auto-Scroll

Author

Released

5/5/2015

While there are plenty of prebuilt sliders, carousels, and marquee tools available for free on the web, there will come a time when you need a design that's more custom. In this course, Chris Converse shows you how to build your own responsive promotional marquee from the ground up with CSS, HTML, and JavaScript. The end result is interactive, attractive, and responsive, adapting both the content and user experience to fit small screens. The skills you learn will allow you to build the marquee featured in the course, create your own design, or modify the prebuilt galleries you find on the web. Download the free exercise files to get started.