WEBVTT 1 00:00:01.420 --> 00:00:02.550 (Instructor) Let's now build 2 00:00:02.550 --> 00:00:05.350 the really cool slider component. 3 00:00:05.350 --> 00:00:07.740 And this is going to be a lot of work. 4 00:00:07.740 --> 00:00:10.020 So we're doing that in two parts. 5 00:00:10.020 --> 00:00:11.993 And so here goes Part 1. 6 00:00:13.550 --> 00:00:17.670 So this is what the final version of the slider looks like. 7 00:00:17.670 --> 00:00:19.740 So we can click these buttons here 8 00:00:19.740 --> 00:00:21.746 to move between the slides, 9 00:00:21.746 --> 00:00:25.263 and you see that also the dot down here then changes. 10 00:00:26.290 --> 00:00:28.390 And as we read the last slide, 11 00:00:28.390 --> 00:00:31.920 as indicated by this last thought. 12 00:00:31.920 --> 00:00:33.980 If we then go to the next one, 13 00:00:33.980 --> 00:00:38.220 it will basically go back to the first one like this. 14 00:00:38.220 --> 00:00:42.223 And of course, we can also click on the dots like this. 15 00:00:43.930 --> 00:00:47.180 So let's not understand how this is actually implemented 16 00:00:47.180 --> 00:00:51.480 in terms of HTML and CSS because as always, 17 00:00:51.480 --> 00:00:55.343 that's a very important aspect to make this all work. 18 00:00:58.790 --> 00:01:02.360 So this is the slider component. 19 00:01:02.360 --> 00:01:05.500 And then each slider has a couple of slides. 20 00:01:05.500 --> 00:01:09.763 So three slides and they are in fact, all side by side. 21 00:01:10.900 --> 00:01:15.510 So we have slide one, make the smaller here, 22 00:01:15.510 --> 00:01:17.940 because the content doesn't really matter. 23 00:01:17.940 --> 00:01:20.160 So you have these three slides. 24 00:01:20.160 --> 00:01:22.530 And so you see here by this blue area 25 00:01:22.530 --> 00:01:24.543 that they're all side by side. 26 00:01:25.690 --> 00:01:27.121 So here in the slider, 27 00:01:27.121 --> 00:01:30.760 we can turn off this overflow property 28 00:01:30.760 --> 00:01:34.030 which is set to hidden and then you can actually see 29 00:01:34.030 --> 00:01:37.313 the next slide already waiting there, basically. 30 00:01:38.440 --> 00:01:40.780 So what happens when we click this button 31 00:01:40.780 --> 00:01:45.330 is that all the slides move a little bit to the left side. 32 00:01:45.330 --> 00:01:49.660 So watch until you see that now the first slide is here, 33 00:01:49.660 --> 00:01:53.470 the second is in the middle and a third is right here. 34 00:01:53.470 --> 00:01:57.820 And that happens by using this transform CSS property, 35 00:01:57.820 --> 00:02:00.560 which we then set to translate x. 36 00:02:00.560 --> 00:02:03.890 And then here, we define these values to basically 37 00:02:03.890 --> 00:02:07.640 move each of the slides as we click these buttons. 38 00:02:07.640 --> 00:02:10.623 So watch what happens here in these values as I click. 39 00:02:11.710 --> 00:02:15.960 And so now the last slide here is basically at zero percent. 40 00:02:15.960 --> 00:02:18.710 The one before is that minus 100. 41 00:02:18.710 --> 00:02:21.390 And the one before is at minus 200. 42 00:02:21.390 --> 00:02:23.630 So minus is basically to the left, 43 00:02:23.630 --> 00:02:26.093 and the width of each slide is 100. 44 00:02:27.720 --> 00:02:30.790 And so basically, this is all we need to do 45 00:02:30.790 --> 00:02:33.030 in order to make this slide work. 46 00:02:33.030 --> 00:02:37.110 So basically adapt these percentages here as we go. 47 00:02:37.110 --> 00:02:40.260 So you see that now the first slide is zero percent, 48 00:02:40.260 --> 00:02:43.520 then the other one that 100 and a third one, 49 00:02:43.520 --> 00:02:47.790 which is all the way to the right side, is now at 200%. 50 00:02:47.790 --> 00:02:51.870 So this is basically the starting position of the slider. 51 00:02:51.870 --> 00:02:54.687 And let's compare that to what we have currently 52 00:02:54.687 --> 00:02:56.770 in our slider. 53 00:02:56.770 --> 00:02:58.530 So we have all of the slides 54 00:02:58.530 --> 00:03:01.670 basically on top of each other right now. 55 00:03:01.670 --> 00:03:04.660 And so the first thing that we should do here 56 00:03:04.660 --> 00:03:07.620 is to basically establish this initial condition 57 00:03:07.620 --> 00:03:10.063 where they are all side by side. 58 00:03:11.260 --> 00:03:12.580 So like this. 59 00:03:12.580 --> 00:03:14.780 And so what we're going to do on each of them 60 00:03:14.780 --> 00:03:19.060 is to set this transform property to these percentages. 61 00:03:19.060 --> 00:03:21.163 But of course, all automatically. 62 00:03:23.280 --> 00:03:25.283 So let's start here with our slider. 63 00:03:27.010 --> 00:03:29.760 And as always, I'm going to start with some selections. 64 00:03:31.400 --> 00:03:33.490 So starting with the slider, 65 00:03:33.490 --> 00:03:36.400 or actually with the slides themselves, 66 00:03:36.400 --> 00:03:38.580 so that we can then manipulate them. 67 00:03:38.580 --> 00:03:40.253 So document.querySelectorAll. 68 00:03:44.000 --> 00:03:45.660 And so that's a slide. 69 00:03:45.660 --> 00:03:48.920 So with the class of slide and we can also of course, 70 00:03:48.920 --> 00:03:51.693 see that here in our own HTML. 71 00:03:53.170 --> 00:03:56.020 So you see, here we have the slide. 72 00:03:56.020 --> 00:03:59.860 Now the content that is inside of each of these slides, 73 00:03:59.860 --> 00:04:03.270 is completely irrelevant for our purposes. 74 00:04:03.270 --> 00:04:07.370 So all we are concerned with is the slider element, 75 00:04:07.370 --> 00:04:09.010 and then this slide. 76 00:04:09.010 --> 00:04:11.030 So this one and all the others. 77 00:04:11.030 --> 00:04:13.983 So I can collapse these just to see. 78 00:04:14.860 --> 00:04:18.460 And so yeah, we are only going to be concerned 79 00:04:18.460 --> 00:04:20.760 with the slides and then you can maybe 80 00:04:20.760 --> 00:04:23.390 use this for your own projects in the future. 81 00:04:23.390 --> 00:04:26.660 And put whatever you want inside these slides. 82 00:04:26.660 --> 00:04:28.970 For example, you could just have images, 83 00:04:28.970 --> 00:04:31.400 or really anything that you want. 84 00:04:31.400 --> 00:04:34.520 And in fact, that's what I have down here. 85 00:04:34.520 --> 00:04:36.990 So here I only have some images, 86 00:04:36.990 --> 00:04:39.473 and maybe we should actually work with that. 87 00:04:40.830 --> 00:04:42.740 So let's actually try that. 88 00:04:42.740 --> 00:04:44.593 So I will comment out this part. 89 00:04:46.240 --> 00:04:51.033 So not really sure how that works anymore. 90 00:04:53.921 --> 00:04:58.921 And so now let's make this actually visible. 91 00:04:59.550 --> 00:05:00.423 Just to see. 92 00:05:06.250 --> 00:05:08.010 So these are our slides now. 93 00:05:08.010 --> 00:05:11.900 But once again, they're all on top of each other. 94 00:05:11.900 --> 00:05:14.543 And we can see that here when we inspect them. 95 00:05:17.530 --> 00:05:20.660 So indeed, all these slides are in the same position. 96 00:05:20.660 --> 00:05:23.350 And so let's create that starting condition 97 00:05:23.350 --> 00:05:25.700 that I mentioned a minute ago. 98 00:05:25.700 --> 00:05:28.233 So putting all the slides side by side. 99 00:05:30.580 --> 00:05:32.890 So let's take the slides. 100 00:05:32.890 --> 00:05:34.640 And we're going to loop through them 101 00:05:34.640 --> 00:05:37.440 and set the style on each of them. 102 00:05:37.440 --> 00:05:40.140 So let's create a simple arrow function here. 103 00:05:40.140 --> 00:05:42.670 And the parameters, I will just call S for slide. 104 00:05:42.670 --> 00:05:46.143 And then we also need the second one, which is the index. 105 00:05:46.980 --> 00:05:49.560 And you will see in a minute why that is. 106 00:05:49.560 --> 00:05:52.883 And so here, we want to set the style on each of the sides. 107 00:05:53.930 --> 00:05:56.240 And remember, it is the transform property 108 00:05:56.240 --> 00:05:57.343 that we want to set. 109 00:05:58.320 --> 00:06:02.683 So transform, and then we want to set it to translate x. 110 00:06:05.440 --> 00:06:09.163 And then here is where we have to specify the value. 111 00:06:09.163 --> 00:06:12.550 And that value is going to be in percentages. 112 00:06:12.550 --> 00:06:15.750 And let me just write down here what we want. 113 00:06:15.750 --> 00:06:19.190 So the first slide should be at zero percent, 114 00:06:19.190 --> 00:06:24.190 the second should be at 100%, then 200%, and then 300%. 115 00:06:26.762 --> 00:06:29.830 And so that's because translate x 116 00:06:29.830 --> 00:06:33.370 will basically move them to position 100%. 117 00:06:33.370 --> 00:06:36.910 So the width of each of these images is 100%. 118 00:06:36.910 --> 00:06:38.210 And so then the second image 119 00:06:38.210 --> 00:06:41.770 will start right here at the end of the first one. 120 00:06:41.770 --> 00:06:44.460 Then the third one will start right after the first one, 121 00:06:44.460 --> 00:06:48.840 which is at position 200% and then 300. 122 00:06:48.840 --> 00:06:51.363 So how can we calculate these values here? 123 00:06:52.390 --> 00:06:56.110 Well, we can simply multiply 100%. 124 00:06:56.110 --> 00:06:58.893 So here, we need now a JavaScript value. 125 00:06:59.730 --> 00:07:04.470 So we can multiply 100% by the current index. 126 00:07:04.470 --> 00:07:07.030 So in the beginning, that's going to be zero. 127 00:07:07.030 --> 00:07:09.560 So zero times 100, is zero. 128 00:07:09.560 --> 00:07:14.120 And then, as you see, it will go all the way until 300. 129 00:07:14.120 --> 00:07:17.980 Because in this case, we have four images or four slides. 130 00:07:17.980 --> 00:07:20.123 But if we were working with the other slides, 131 00:07:20.123 --> 00:07:22.890 then that would only go to 200%, 132 00:07:22.890 --> 00:07:25.500 because we only have three slides. 133 00:07:25.500 --> 00:07:27.263 So that should already be enough. 134 00:07:28.820 --> 00:07:30.400 And now we have this problem, 135 00:07:30.400 --> 00:07:32.728 that our sections here keep disappearing 136 00:07:32.728 --> 00:07:36.180 and that's because the code we wrote earlier. 137 00:07:36.180 --> 00:07:37.870 So reveal sections. 138 00:07:37.870 --> 00:07:41.083 And so for now, let's remove this observer. 139 00:07:46.020 --> 00:07:47.810 While the observer can actually stay, 140 00:07:47.810 --> 00:07:51.253 what we need to remove is these hidden classes. 141 00:07:53.280 --> 00:07:54.453 So now that works. 142 00:07:57.050 --> 00:07:59.550 And so let's check out the images now. 143 00:07:59.550 --> 00:08:00.963 And we can really see them. 144 00:08:04.520 --> 00:08:09.190 But indeed, they have now zero percent, 100, 200, 300, 145 00:08:09.190 --> 00:08:11.380 and so on and so forth. 146 00:08:11.380 --> 00:08:15.483 Let's maybe temporarily scale down the entire slider. 147 00:08:17.320 --> 00:08:20.360 So let's come here to or let's do 148 00:08:20.360 --> 00:08:22.673 that actually here in JavaScript. 149 00:08:23.620 --> 00:08:26.370 So just to make this a little bit easier for us to see. 150 00:08:27.820 --> 00:08:32.820 So const slider is document.querySelector, slider. 151 00:08:38.710 --> 00:08:39.543 And then what I want to do 152 00:08:39.543 --> 00:08:44.510 is slider.style.transform, and set it to scale. 153 00:08:47.450 --> 00:08:49.113 Let's say 0.5. 154 00:08:51.930 --> 00:08:53.610 Yeah, so that looks a bit better. 155 00:08:53.610 --> 00:08:56.400 Now, we just need to change that overflow 156 00:08:56.400 --> 00:08:57.900 that I just showed you before. 157 00:08:59.290 --> 00:09:02.510 So that overflow here, we need to set to visible. 158 00:09:02.510 --> 00:09:04.060 So also on the slider. 159 00:09:04.060 --> 00:09:07.254 So otherwise, we cannot see the other slides. 160 00:09:07.254 --> 00:09:10.143 So let's do that as well. 161 00:09:13.000 --> 00:09:15.030 So overflow, and we need to set it 162 00:09:15.030 --> 00:09:17.323 to hidden or actually to visible. 163 00:09:21.660 --> 00:09:23.560 Let's make this even smaller actually. 164 00:09:24.810 --> 00:09:28.023 Even smaller, just so we can see all the images. 165 00:09:29.150 --> 00:09:32.040 So you see now all the four of them are here. 166 00:09:32.040 --> 00:09:33.951 And our buttons are not really small. 167 00:09:33.951 --> 00:09:36.070 So they are still here. 168 00:09:36.070 --> 00:09:39.050 But I think we will be able to work with this. 169 00:09:39.050 --> 00:09:40.910 Maybe we can just move the whole thing 170 00:09:40.910 --> 00:09:42.470 a little bit to the left. 171 00:09:42.470 --> 00:09:47.420 So let's say translate x here as well. 172 00:09:47.420 --> 00:09:49.050 And keep in mind that this has nothing 173 00:09:49.050 --> 00:09:51.350 to do with the functionality. 174 00:09:51.350 --> 00:09:54.913 Okay, this is just so we can see what we are doing here. 175 00:09:56.690 --> 00:09:57.683 So this works. 176 00:10:00.282 --> 00:10:01.923 Now we can move it even further. 177 00:10:03.040 --> 00:10:05.533 And so now we can make it a bit bigger again. 178 00:10:10.180 --> 00:10:12.850 So that's beautiful, that works for now. 179 00:10:12.850 --> 00:10:15.900 And then by the end, we will simply remove all of this. 180 00:10:16.989 --> 00:10:19.990 But now let's actually get to work 181 00:10:19.990 --> 00:10:22.070 and make this slider work. 182 00:10:22.070 --> 00:10:24.883 And so I will start by selecting these two buttons. 183 00:10:26.490 --> 00:10:29.657 So that's the button left, query selector. 184 00:10:36.580 --> 00:10:37.910 Let's see here. 185 00:10:37.910 --> 00:10:41.083 So that's slider button left and button right. 186 00:10:46.762 --> 00:10:49.179 And then simply duplicate it. 187 00:10:59.090 --> 00:11:01.770 So button right.addEventListener. 188 00:11:04.630 --> 00:11:07.260 And let's start by only working now 189 00:11:07.260 --> 00:11:09.880 to make the slide go right, 190 00:11:09.880 --> 00:11:11.783 so clicking just on this button here. 191 00:11:13.120 --> 00:11:16.730 And I think we're not even going to need the event for now. 192 00:11:16.730 --> 00:11:20.933 Okay, so this is basically to go to the next slide. 193 00:11:21.950 --> 00:11:25.170 So remember that going to the next slide 194 00:11:25.170 --> 00:11:26.730 is basically simply changing 195 00:11:26.730 --> 00:11:29.820 the value here in the transform property. 196 00:11:29.820 --> 00:11:31.730 So this translate x, 197 00:11:31.730 --> 00:11:34.750 all we will do is to change the percentages. 198 00:11:34.750 --> 00:11:35.803 So that basically the slide 199 00:11:35.803 --> 00:11:39.483 that we want to move to is the one that has zero percent. 200 00:11:40.390 --> 00:11:42.783 So remember that this is what we did here. 201 00:11:44.200 --> 00:11:45.670 So right now the active one 202 00:11:45.670 --> 00:11:47.870 is the one that has zero percent, 203 00:11:47.870 --> 00:11:52.490 and the previous one has minus 100 and the other 100. 204 00:11:52.490 --> 00:11:54.340 So again, that is the whole mechanism 205 00:11:54.340 --> 00:11:57.430 that we're using here to move the slides. 206 00:11:57.430 --> 00:11:59.653 And so this is what we will do now. 207 00:12:00.920 --> 00:12:04.010 So in the beginning, we are at slide zero, 208 00:12:04.010 --> 00:12:06.300 but then when we want to go to the next slide, 209 00:12:06.300 --> 00:12:08.960 we need to increase that. 210 00:12:08.960 --> 00:12:11.980 So let's outside here, create a new variable 211 00:12:11.980 --> 00:12:13.243 for the current slide. 212 00:12:14.270 --> 00:12:18.580 So let current slide and it is a let 213 00:12:18.580 --> 00:12:21.523 because we will of course, then update it. 214 00:12:22.430 --> 00:12:27.430 So we start at zero and then when we go to the next slide, 215 00:12:27.470 --> 00:12:29.873 we simply increase that by one. 216 00:12:32.360 --> 00:12:35.840 All right, and so right now, it is one. 217 00:12:35.840 --> 00:12:37.824 And then what we need to do 218 00:12:37.824 --> 00:12:41.083 is to basically do the same as this, 219 00:12:42.220 --> 00:12:44.083 but with a small change. 220 00:12:46.432 --> 00:12:50.760 So let's say that the current slide is one, 221 00:12:50.760 --> 00:12:52.663 then we do not want this here. 222 00:12:54.240 --> 00:12:56.270 We don't want this, but instead 223 00:12:56.270 --> 00:12:59.053 we want the first slide to be minus 100. 224 00:13:00.080 --> 00:13:05.080 This one zero, this one 100, and the other one 200. 225 00:13:05.150 --> 00:13:06.433 So how do we do that? 226 00:13:07.400 --> 00:13:10.260 Well, we take the current index, 227 00:13:10.260 --> 00:13:13.420 and then we subtract the current slide. 228 00:13:13.420 --> 00:13:17.230 So again, we will take this, 229 00:13:17.230 --> 00:13:19.670 so each slide that we're looping over, 230 00:13:19.670 --> 00:13:22.493 and then minus the current slide. 231 00:13:23.730 --> 00:13:26.410 So like this, and then this will give us 232 00:13:26.410 --> 00:13:28.370 exactly what we want. 233 00:13:28.370 --> 00:13:31.883 So again, let's say that the current slide is one. 234 00:13:34.050 --> 00:13:36.013 Let's write that here, actually. 235 00:13:37.660 --> 00:13:40.420 And so then as we loop over these slides, 236 00:13:40.420 --> 00:13:42.800 in the first iteration this will be zero, 237 00:13:42.800 --> 00:13:45.860 and then zero minus one will be minus one. 238 00:13:45.860 --> 00:13:49.960 And then times 100 is of course, minus 100. 239 00:13:49.960 --> 00:13:52.870 Then the next slide, the index is one, 240 00:13:52.870 --> 00:13:56.360 and then one minus one is zero. 241 00:13:56.360 --> 00:13:59.110 And so that will then become zero percent. 242 00:13:59.110 --> 00:14:01.520 And so remember that the active slide 243 00:14:01.520 --> 00:14:05.460 is exactly the one that we want to be zero percent. 244 00:14:05.460 --> 00:14:08.770 And so this should now actually work. 245 00:14:08.770 --> 00:14:13.563 Let's see and yeah, it is already moving. 246 00:14:14.440 --> 00:14:17.550 So the first part is already doing its job. 247 00:14:17.550 --> 00:14:21.030 But now we are kind of at the last slide here. 248 00:14:21.030 --> 00:14:22.623 So let's see what happens next. 249 00:14:23.660 --> 00:14:25.483 So it actually keeps going. 250 00:14:26.320 --> 00:14:29.070 So the number of slides keeps increasing. 251 00:14:29.070 --> 00:14:32.510 And so of course, these values here also keep increasing. 252 00:14:32.510 --> 00:14:35.610 Because, well, JavaScript doesn't know 253 00:14:35.610 --> 00:14:37.550 that we are working a slider 254 00:14:37.550 --> 00:14:39.540 and so of course it doesn't stop. 255 00:14:39.540 --> 00:14:41.860 We need to tell it to stop. 256 00:14:41.860 --> 00:14:44.350 So how can we do that? 257 00:14:44.350 --> 00:14:47.210 Well, the best way is to actually define 258 00:14:47.210 --> 00:14:50.000 the number of slides and then make it stop 259 00:14:50.000 --> 00:14:51.803 once we reach the last one. 260 00:14:53.530 --> 00:14:56.253 So let's say that the next slide. 261 00:14:57.311 --> 00:15:01.910 So the maximum slide where we can go is slides.length. 262 00:15:03.870 --> 00:15:07.560 So basically the length of this node list here, 263 00:15:07.560 --> 00:15:11.280 and our node list, we can also read the length property, 264 00:15:11.280 --> 00:15:12.653 just like on an array. 265 00:15:14.210 --> 00:15:17.940 So here when we define the value of the current slide, 266 00:15:17.940 --> 00:15:21.180 we now need to update this a little bit. 267 00:15:21.180 --> 00:15:24.683 And so if we are at the next slide, 268 00:15:25.610 --> 00:15:29.313 so if the current slide is equal the next slide, 269 00:15:33.320 --> 00:15:36.423 then we want the current slide to become zero again. 270 00:15:37.310 --> 00:15:41.330 And so that's how we return to the beginning of the slides. 271 00:15:41.330 --> 00:15:45.203 And otherwise, we will simply increase the slides by one. 272 00:15:47.220 --> 00:15:49.313 Okay, so let's test that here. 273 00:15:51.390 --> 00:15:53.223 So everything keeps working. 274 00:15:54.690 --> 00:15:56.920 Now we are at slide number three. 275 00:15:56.920 --> 00:15:58.730 And so we are at the end. 276 00:15:58.730 --> 00:16:00.893 But actually, this next slide is four. 277 00:16:01.860 --> 00:16:04.850 So the length is four, but the index is three. 278 00:16:04.850 --> 00:16:06.580 And so as always, that's because 279 00:16:06.580 --> 00:16:09.270 the length is not zero based. 280 00:16:09.270 --> 00:16:11.760 So probably it will keep going one more time, 281 00:16:11.760 --> 00:16:14.630 and then it will return to the beginning. 282 00:16:14.630 --> 00:16:16.640 Yeah, beautiful. 283 00:16:16.640 --> 00:16:20.440 All we need to change here is to add minus one to this, 284 00:16:20.440 --> 00:16:24.010 to basically also make this zero based. 285 00:16:24.010 --> 00:16:26.223 And so now, let's see. 286 00:16:28.260 --> 00:16:31.450 Well, our slider is basically already working. 287 00:16:31.450 --> 00:16:35.380 So at least in this direction, so this button of course not. 288 00:16:35.380 --> 00:16:39.740 But here, we can see that it's doing its job already. 289 00:16:39.740 --> 00:16:41.740 So that's really nice. 290 00:16:41.740 --> 00:16:45.700 Let's now just quickly refactor this code a little bit. 291 00:16:45.700 --> 00:16:49.220 So we have here, basically the exact same code, 292 00:16:49.220 --> 00:16:51.760 or at least almost the same code as here. 293 00:16:51.760 --> 00:16:54.693 But we can refactor this into its own function. 294 00:16:55.590 --> 00:16:57.003 So let's grab this here. 295 00:16:59.300 --> 00:17:02.487 And I will create a function now called goToSlide. 296 00:17:07.322 --> 00:17:10.750 So that's a function where we pass in the slide. 297 00:17:10.750 --> 00:17:12.590 So basically, the number of the slide 298 00:17:12.590 --> 00:17:15.130 where we want to go to and then here, 299 00:17:15.130 --> 00:17:17.240 we change the current slide 300 00:17:17.240 --> 00:17:19.113 to the slide that we are indicating. 301 00:17:20.600 --> 00:17:22.600 And here, I can then call this goToSlide 302 00:17:24.894 --> 00:17:26.560 with the current slide. 303 00:17:26.560 --> 00:17:28.563 So far, we didn't change anything. 304 00:17:30.140 --> 00:17:32.033 Just delete this comment here. 305 00:17:32.870 --> 00:17:35.920 And now to be able to remove this part here, 306 00:17:35.920 --> 00:17:39.420 all we need to do is to basically call this function here, 307 00:17:39.420 --> 00:17:41.410 right in the beginning of our code 308 00:17:41.410 --> 00:17:43.453 with the slide set to zero. 309 00:17:44.600 --> 00:17:47.040 So this slight argument set to zero. 310 00:17:47.040 --> 00:17:49.800 And so what this will do is then basically, 311 00:17:49.800 --> 00:17:51.700 once our application starts, 312 00:17:51.700 --> 00:17:54.060 it immediately goes to slide zero. 313 00:17:54.060 --> 00:17:57.123 And so that will then execute basically this code. 314 00:17:58.630 --> 00:18:00.480 So slide will be zero. 315 00:18:00.480 --> 00:18:04.020 And so i minus zero is then of course just i 316 00:18:04.020 --> 00:18:06.223 and so that's 10, exactly what we have here. 317 00:18:07.370 --> 00:18:10.483 So go to slide zero. 318 00:18:13.824 --> 00:18:15.423 And so now I can delete this. 319 00:18:16.630 --> 00:18:17.623 And that's great. 320 00:18:19.070 --> 00:18:21.504 Then to make this just a bit more beautiful, 321 00:18:21.504 --> 00:18:24.314 let's actually also take this one here, 322 00:18:24.314 --> 00:18:26.723 and create a new function for that. 323 00:18:27.850 --> 00:18:30.940 So const nextSlide and put it here. 324 00:18:37.380 --> 00:18:39.720 And this one doesn't need any parameters. 325 00:18:39.720 --> 00:18:42.440 Because the goal of this is really just to export 326 00:18:42.440 --> 00:18:45.333 the functionality into its own named function. 327 00:18:49.240 --> 00:18:52.853 And so indeed, it keeps working just as before. 328 00:18:54.090 --> 00:18:58.970 Next up, let's then work on this button here. 329 00:18:58.970 --> 00:19:03.090 And so all I need to do is to add an event listener 330 00:19:03.090 --> 00:19:04.483 to button left. 331 00:19:08.220 --> 00:19:10.580 Also click and then I'm going to create 332 00:19:10.580 --> 00:19:15.580 a function called previous slide, or just prev slide. 333 00:19:17.550 --> 00:19:21.033 So let me create that here very quick as well. 334 00:19:22.180 --> 00:19:25.213 So const, brief slide. 335 00:19:29.280 --> 00:19:33.370 And so in this case, the current slide will be decreased. 336 00:19:33.370 --> 00:19:36.470 And then here, I can simply reuse the same function 337 00:19:36.470 --> 00:19:38.810 that I already wrote before, 338 00:19:38.810 --> 00:19:40.960 and also with the current slide. 339 00:19:40.960 --> 00:19:43.830 So the functionality of moving to a slide 340 00:19:43.830 --> 00:19:45.470 is of course exactly the same 341 00:19:45.470 --> 00:19:48.750 no matter if we go forward or upward. 342 00:19:48.750 --> 00:19:50.970 So all this will do is to update 343 00:19:50.970 --> 00:19:54.870 the transform property on all of the slides. 344 00:19:54.870 --> 00:19:56.870 And that works in always the same way 345 00:19:56.870 --> 00:20:00.550 no matter if we're going forwards or backwards. 346 00:20:00.550 --> 00:20:02.770 So the main difference between the next 347 00:20:02.770 --> 00:20:05.290 and the previous slide is really the way 348 00:20:05.290 --> 00:20:07.993 in which we determined the current slide. 349 00:20:09.130 --> 00:20:10.630 So when we go to the next slide, 350 00:20:10.630 --> 00:20:13.160 we basically increase the current slide. 351 00:20:13.160 --> 00:20:16.360 And when we go backwards, so to the previous slide, 352 00:20:16.360 --> 00:20:17.663 we simply decrease it. 353 00:20:19.380 --> 00:20:21.140 So let's try that now. 354 00:20:21.140 --> 00:20:23.110 And first we need to go forward, 355 00:20:23.110 --> 00:20:26.560 because our functionary is not really complete. 356 00:20:26.560 --> 00:20:30.280 But in this situation, it already works just fine. 357 00:20:30.280 --> 00:20:31.590 But then as we keep going, 358 00:20:31.590 --> 00:20:34.260 we have the same problem as before, 359 00:20:34.260 --> 00:20:37.620 because we simply keep decreasing the current slide. 360 00:20:37.620 --> 00:20:39.883 And so we now need to fix that. 361 00:20:41.050 --> 00:20:46.050 So in which situation does simply decreasing 362 00:20:46.210 --> 00:20:47.893 the current slide not work? 363 00:20:49.795 --> 00:20:52.110 So it works right now. 364 00:20:52.110 --> 00:20:53.972 So now it works. 365 00:20:53.972 --> 00:20:56.033 But now it does not work. 366 00:20:56.920 --> 00:20:58.490 And so that is in the situation 367 00:20:58.490 --> 00:21:01.053 where the current slide is already zero. 368 00:21:02.610 --> 00:21:04.150 So that's right. 369 00:21:04.150 --> 00:21:09.150 If the current slide is zero. 370 00:21:09.410 --> 00:21:11.760 So in this case, the current slide 371 00:21:11.760 --> 00:21:15.433 should be equal to the next slide. 372 00:21:16.280 --> 00:21:18.051 And again, that's minus one, 373 00:21:18.051 --> 00:21:22.713 because that next slide is not zero based. 374 00:21:24.890 --> 00:21:27.060 And then else and so now, 375 00:21:30.286 --> 00:21:32.743 that should actually work. 376 00:21:35.670 --> 00:21:39.803 And indeed beautiful. 377 00:21:41.210 --> 00:21:44.590 And so now, our slider is actually working already. 378 00:21:44.590 --> 00:21:46.653 We are just missing a couple of features. 379 00:21:47.500 --> 00:21:50.833 So namely, these dots here, 380 00:21:52.100 --> 00:21:54.660 which is a little bit complicated to implement. 381 00:21:54.660 --> 00:21:56.160 And also in this version, 382 00:21:56.160 --> 00:22:00.100 we can use the arrow left and arrow right functions 383 00:22:00.100 --> 00:22:02.023 to move through the slider. 384 00:22:03.790 --> 00:22:06.400 So now I'm just hitting the left button, 385 00:22:06.400 --> 00:22:07.573 and the right button. 386 00:22:09.020 --> 00:22:11.653 But I'm going to leave that for the next video. 387 00:22:12.690 --> 00:22:16.830 For now, let's just get rid of these things 388 00:22:16.830 --> 00:22:18.280 that we did in the beginning, 389 00:22:19.650 --> 00:22:22.396 so that we can see the actual slider 390 00:22:22.396 --> 00:22:24.377 in all its beauty (laughs). 391 00:22:25.940 --> 00:22:30.010 So now, it does indeed look like a real slider, 392 00:22:30.010 --> 00:22:30.843 doesn't it? 393 00:22:31.860 --> 00:22:33.900 So I'm really happy with this result. 394 00:22:33.900 --> 00:22:36.100 And I hope that you're as well. 395 00:22:36.100 --> 00:22:38.490 And of course, I wouldn't expect you 396 00:22:38.490 --> 00:22:42.460 to be able to write this code on your own just yet. 397 00:22:42.460 --> 00:22:44.490 So when we implement something like this, 398 00:22:44.490 --> 00:22:46.850 there is a lot of stuff to think about, 399 00:22:46.850 --> 00:22:48.300 especially in this case, 400 00:22:48.300 --> 00:22:52.130 the most tricky part is in my opinion this here. 401 00:22:52.130 --> 00:22:54.860 And this probably comes from experience. 402 00:22:54.860 --> 00:22:57.460 And so at a certain point, if you practice enough, 403 00:22:57.460 --> 00:23:01.260 you will also be able to come up with a logic like this. 404 00:23:01.260 --> 00:23:03.350 So I just invite you to study this code 405 00:23:03.350 --> 00:23:05.990 here a little bit before we move on. 406 00:23:05.990 --> 00:23:07.730 And once you're done doing that, 407 00:23:07.730 --> 00:23:10.600 then let's move on and implement these dots 408 00:23:10.600 --> 00:23:13.663 at the bottom of the slider that I just showed you.