Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So, now in order to activate the left and right arrows here, we're going to need to add a custom function to add a clickEvent to these. So, let's switch over to carousel.js. After the custom function we created called createCarousel, let's come down. Let's type function, createCustomButtons, beginning and ending parentheses, beginning and ending bracket. Let's split the brackets open. So, the first thing we're going to do inside of here is target the item with the class of nextItem.
So, dollar sign, parentheses, inside of the parentheses two tick marks for a string literal .nextItem. After the parentheses we're going to type .click, parentheses, and a semicolon. Inside of click we're going to type function, parentheses and brackets, split the brackets open. Now, when somebody actually clicks on an item with a class of nextItem we're going to run this instruction.
Dollar sign, parentheses, inside of the parentheses, two tick marks for a string literal. We're going to target div, pound, carousel. Next, we're going to type .roundabout, beginning and ending parentheses, semicolon. So we can run the roundabout function again on this carousel. And in this case inside of the roundabout function, we're going to type two tick marks for a string literal and we're going to lock onto a built-in function that's part of this plug-in. We're going to type animateToNextChild.
So, now that we've activated the nextItem class, let's select this entire instruction, copy to the clipboard. Let's paste it after the previous instruction. And inside of here, instead of .nextItem, we're going to type .prevItem and then instead of animateToNextChild, we're going to type amimateToPreviousChild. So, now before we can test these, we actually have to run this function so that the buttons get activated. So, let's come up here and select the createCustomButtons function.
Let's copy that, and let's put that inside of the createCarousel function after we generate the carousel. So, let's paste createCustomButtons here and put a semicolon. Now, let's come up to File and choose Save All. Let's switch back to carousel.html. Let's choose File > Preview in Browser. Now inside of our browser we can still click on the teapots and they still work. Now, we can also click on the right and left arrows and these will also control the carousel as well. So now that our buttons are activated, in the next movie we'll work on a script that will ask the carousel to tell us which item is actually in the forefront.
Get unlimited access to all courses for just $25/month.Become a member