1 00:00:00,780 --> 00:00:01,700 Hello and welcome. 2 00:00:01,740 --> 00:00:11,880 In this lecture we are going to create the functionality for our image slider using JavaScript. 3 00:00:12,430 --> 00:00:15,290 All right so this is my blank script file. 4 00:00:15,690 --> 00:00:20,220 So where what I'm going to do I've already pre written the code. 5 00:00:20,490 --> 00:00:26,640 I'm just going to add the code and explain what the code does. 6 00:00:26,640 --> 00:00:33,720 So I've added the code that will create the functionality for the slider. 7 00:00:33,720 --> 00:00:37,140 So there are three functions here. 8 00:00:37,260 --> 00:00:47,100 We've got the first function here sorry to function of function here called plus DBS and go function 9 00:00:47,100 --> 00:00:47,370 here. 10 00:00:47,370 --> 00:00:48,520 Cause showed it. 11 00:00:48,720 --> 00:00:59,730 So I started off on line 1 by defining a variable called slide index and I've set the value to 1 line 12 00:00:59,750 --> 00:01:00,310 2. 13 00:01:00,370 --> 00:01:09,550 I have called the function this function here called should d the end there means whatever value you 14 00:01:09,550 --> 00:01:12,450 pass in and I've passed it. 15 00:01:12,600 --> 00:01:17,890 This light index which is this and the slide index of values once I've passed it. 16 00:01:17,910 --> 00:01:19,540 1 here. 17 00:01:19,550 --> 00:01:20,460 All right. 18 00:01:20,490 --> 00:01:29,940 Line 4 created a function called plus div and inside the parentheses will pass the end that end represents 19 00:01:30,030 --> 00:01:31,390 a value. 20 00:01:31,830 --> 00:01:35,960 Could be an integer value could be 1 2 Whatever. 21 00:01:36,360 --> 00:01:37,150 Okay. 22 00:01:37,320 --> 00:01:40,530 And that function does function here. 23 00:01:40,530 --> 00:01:46,890 Code Plus div also takes seeing this parameter. 24 00:01:46,890 --> 00:01:52,890 So what this function does it all this function plus the calls. 25 00:01:53,070 --> 00:01:54,260 This function as well. 26 00:01:54,270 --> 00:01:56,130 So we call this function. 27 00:01:56,130 --> 00:01:58,800 Sure Dave is being called from here. 28 00:01:58,800 --> 00:02:04,920 So when you want to call a function you just type in the name and then you pass it the parent parameters 29 00:02:04,920 --> 00:02:12,440 of past it slide the index which is this variable here of 1 plus or equals 2. 30 00:02:12,480 --> 00:02:19,350 Using this operator plus equals 2 n so it would be plus or equals to whatever that n represents. 31 00:02:19,350 --> 00:02:19,720 OK. 32 00:02:19,760 --> 00:02:22,280 So end could be a number 2 3 f1 on. 33 00:02:22,900 --> 00:02:23,190 OK. 34 00:02:23,220 --> 00:02:28,200 That's one of the so basically always saying that whatever's slide number you pass in. 35 00:02:28,230 --> 00:02:30,530 So we started with a slide number one. 36 00:02:30,780 --> 00:02:42,270 It will not add slide number 2 and so on that's what that n represents the function on line 8 to 17 37 00:02:42,270 --> 00:02:47,940 what that function show d remember the images are in D. 38 00:02:48,120 --> 00:02:57,750 So I said show D and have passed it in passed in to the parentheses and n value so we've got a variable 39 00:02:57,750 --> 00:03:08,450 called i this I will act as a counter variable on line 10 called variable X and I'll set it to equals 40 00:03:08,450 --> 00:03:12,610 to a documented element by class name. 41 00:03:12,930 --> 00:03:19,380 Okay and the class name up past it my slides remember if I go to the hate CML you've got a class called 42 00:03:19,380 --> 00:03:20,200 slides. 43 00:03:20,260 --> 00:03:24,100 Okay so that's what it's referring to. 44 00:03:24,690 --> 00:03:34,680 I have attached an if statement on line eleven saying that if the value of n and could represent any 45 00:03:34,680 --> 00:03:40,010 number I've got seven image images so the N could represent any of those numbers. 46 00:03:40,080 --> 00:03:52,110 So if and is greater than these variable X does let that is greater than the length of variable X then 47 00:03:52,890 --> 00:03:58,860 the slide index equals to 1 which is is variable here. 48 00:03:58,860 --> 00:04:11,670 If this n okay the N and can represent again and in number if the variable n if n is less than 1 then 49 00:04:11,670 --> 00:04:17,390 this slide index equals 2 x which is is variable on line 10 dot Flint. 50 00:04:17,700 --> 00:04:26,880 So we're saying that on line 13 there is a counter saying that for every where is equal to zero R is 51 00:04:26,880 --> 00:04:32,730 less than x dollars lent then I should be increased by 1. 52 00:04:32,760 --> 00:04:42,810 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 53 00:04:42,840 --> 00:04:50,550 x then increase it by 1 plus plus means increase to equip you keep increasing the number of the slides 54 00:04:51,060 --> 00:05:01,620 as you flick true until it gets to the last one and then line 14 saying if X okay and a policy X into 55 00:05:01,620 --> 00:05:11,670 an array if X that I dot style dot display is none that is if there's no display the display is known 56 00:05:12,360 --> 00:05:22,260 then Saint X dot slide index minus one dot style display equals block them is displayed images as a 57 00:05:22,260 --> 00:05:32,510 block that's what I say so this is the style the script that creates the functionality for our slider 58 00:05:33,240 --> 00:05:42,420 so I'll save that now run the code and see what it looks like so fly that should work correctly now 59 00:05:42,450 --> 00:05:49,110 so if I click on this I should be able to flip true you can see all the images are of the same size 60 00:05:49,350 --> 00:05:57,240 OK so I can keep flicking through can also move go back one and go back to 2 These are all these seven 61 00:05:57,240 --> 00:06:01,740 images are added to the slider so thanks for watching. 62 00:06:01,740 --> 00:06:04,760 I hope the project has been useful. 63 00:06:04,950 --> 00:06:08,220 If you've got any questions please feel free to ask. 64 00:06:08,730 --> 00:06:10,680 Thank you and bye for now.