Hello and welcome.
In this lecture we are going to create the functionality for our image slider using JavaScript.
All right so this is my blank script file.
So where what I'm going to do I've already pre written the code.
I'm just going to add the code and explain what the code does.
So I've added the code that will create the functionality for the slider.
So there are three functions here.
We've got the first function here sorry to function of function here called plus DBS and go function
here.
Cause showed it.
So I started off on line 1 by defining a variable called slide index and I've set the value to 1 line
2.
I have called the function this function here called should d the end there means whatever value you
pass in and I've passed it.
This light index which is this and the slide index of values once I've passed it.
1 here.
All right.
Line 4 created a function called plus div and inside the parentheses will pass the end that end represents
a value.
Could be an integer value could be 1 2 Whatever.
Okay.
And that function does function here.
Code Plus div also takes seeing this parameter.
So what this function does it all this function plus the calls.
This function as well.
So we call this function.
Sure Dave is being called from here.
So when you want to call a function you just type in the name and then you pass it the parent parameters
of past it slide the index which is this variable here of 1 plus or equals 2.
Using this operator plus equals 2 n so it would be plus or equals to whatever that n represents.
OK.
So end could be a number 2 3 f1 on.
OK.
That's one of the so basically always saying that whatever's slide number you pass in.
So we started with a slide number one.
It will not add slide number 2 and so on that's what that n represents the function on line 8 to 17
what that function show d remember the images are in D.
So I said show D and have passed it in passed in to the parentheses and n value so we've got a variable
called i this I will act as a counter variable on line 10 called variable X and I'll set it to equals
to a documented element by class name.
Okay and the class name up past it my slides remember if I go to the hate CML you've got a class called
slides.
Okay so that's what it's referring to.
I have attached an if statement on line eleven saying that if the value of n and could represent any
number I've got seven image images so the N could represent any of those numbers.
So if and is greater than these variable X does let that is greater than the length of variable X then
the slide index equals to 1 which is is variable here.
If this n okay the N and can represent again and in number if the variable n if n is less than 1 then
this slide index equals 2 x which is is variable on line 10 dot Flint.
So we're saying that on line 13 there is a counter saying that for every where is equal to zero R is
less than x dollars lent then I should be increased by 1.
So every time if the if the value of IE is set to 0 and then R is less than the length of the variable
x then increase it by 1 plus plus means increase to equip you keep increasing the number of the slides
as you flick true until it gets to the last one and then line 14 saying if X okay and a policy X into
an array if X that I dot style dot display is none that is if there's no display the display is known
then Saint X dot slide index minus one dot style display equals block them is displayed images as a
block that's what I say so this is the style the script that creates the functionality for our slider
so I'll save that now run the code and see what it looks like so fly that should work correctly now
so if I click on this I should be able to flip true you can see all the images are of the same size
OK so I can keep flicking through can also move go back one and go back to 2 These are all these seven
images are added to the slider so thanks for watching.
I hope the project has been useful.
If you've got any questions please feel free to ask.
Thank you and bye for now.