Next is Completing the slideshow
Throughout this chapter we were working on our slideshow, but we have a few remaining elements we need to complete. By the end of the lesson, you we will have a fully working completed slideshow.
Video Transcript
00:00The chapter is over I
00:03Said to the chapter although it's not over yet
00:06There's a small small two small small small things we have to do to complete our slideshow
00:11So let's go back into that slide show wrap it up so we could finish up this chapter to wrap up this chapter
00:16What I really want to do before we wrap up this chapter is actually complete our slide show
00:22So one thing is I want to add a little bit more color here
00:24So whenever we slide to different areas what I will sort that out in a second because I was playing around in between
00:30What I want us to do is basically have a change color change whenever we go from slide to slide and also that our hotspot
00:37Will move to the place where it needs to be
00:40Currently our hotspot is actually set as the first item because that's the first item
00:44We see by default and it's not actually moving and changing our hotspot whenever we move to different sections
00:51All right, so let's go ahead and continue with our flow
00:54So I'm going to go ahead here and just save this because we I was playing around here
00:58Next thing that I want to do is I want to actually start coloring our object and to color our object
01:03What I want to do is I already set here this colors background palette
01:07And what I want to do is every time we move to a different slide
01:10I want our background to change a color so to do that
01:13I'm gonna re-enable that that variable because I want to have access inside of my function to that that to the this
01:19It's the actual object itself
01:22Next step that I'm gonna do is I'm gonna go into my tween light
01:25To and this time around what I want
01:28It's what I want to animate is I want to animate the item that has the background
01:32so I could go ahead even in my browser to figure out which item that is and
01:37if I just
01:38inspect the element
01:41Then I'm gonna find the one with the background which is the slider so I could go ahead and use the slider
01:47Go right back in there and
01:49Now we're gonna animate our slider
01:52Oh, so that was our first property next property is along
01:55I'm gonna let it animate for a second and now it's time for us to animate our property
02:00I'm gonna go ahead and animate our background color
02:04And I'm gonna set that color to be the value based on our index
02:08So I'm gonna go to that which will give me access to the object of our Oh to geek slideshow
02:14and I'm gonna go into my colors array that I prepared in advance and
02:20Last but not least is to pick the color
02:22I'm gonna send inside that index because we have that index of the button and I made sure that we have the exact same amount of
02:28colors
02:29Reflecting to the amount of buttons we have there
02:32all that's left for us to do is to close our
02:34Function call and to run our application and now whenever we roam around and go from one slide to the next
02:41It should vividly change colors and create a really nice effect
02:45All right
02:46So before we wrap things up
02:47But I also want to fix this button area that we have
02:50Which is not working the way we want it to work is when we're in this element
02:53We don't want that element to be highlighted. So to do that, I'm gonna approach our mouse over area here
02:59Let me just break a line here. And what I want to do is I first want to approach our buttons
03:04So to do that, I'm gonna approach the this now that we have act. Oh not this that right?
03:09So we have access to our oh and actually our buttons right now are not defined although it's coming in as a string
03:16But we then changed it. But once we change it, we don't have access to it
03:20So I'm gonna go ahead here and just set also of this dot buttons to equal that buttons
03:25That way we could continue using the name buttons when we're inside of this for loop
03:29But then I'll have also a reference to it
03:31I'll be able to access to at any time that I'm using the that later on
03:34so now that I'm inside of my that I could say that dot buttons and
03:38I could literally just ask for my jQuery to remove the class from all the buttons and it's gonna automatically get rid of the
03:45active as soon as our
03:48This function is called so it's gonna make sure that no button has that
03:51Class now that we set that the next thing for me to do is I want to also add the item
03:56But only to the item that was just right now selected
03:59And to do that, I could literally just go ahead and or approach the item itself because our this we said was
04:06Was the item itself so I could literally just say this item that is now selected add the class to it
04:13and
04:14If I run this one more time
04:15We should be able to see that our item that is being selected remain selected
04:21so if I go to the last item and I roll off it's gonna stay selected and no matter where I go the item will remain
04:28Selected and that's it. We've created our slideshow
04:31We're gonna definitely be back to it throughout the next few chapters as we explore in the new learn new things in
04:38the tween light library, but for now we are done with our slideshow and
04:43We are done with this chapter. So see you in the next chapter