Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,420 --> 00:00:02,550 (Instructor) Let's now build 2 2 00:00:02,550 --> 00:00:05,350 the really cool slider component. 3 3 00:00:05,350 --> 00:00:07,740 And this is going to be a lot of work. 4 4 00:00:07,740 --> 00:00:10,020 So we're doing that in two parts. 5 5 00:00:10,020 --> 00:00:11,993 And so here goes Part 1. 6 6 00:00:13,550 --> 00:00:17,670 So this is what the final version of the slider looks like. 7 7 00:00:17,670 --> 00:00:19,740 So we can click these buttons here 8 8 00:00:19,740 --> 00:00:21,746 to move between the slides, 9 9 00:00:21,746 --> 00:00:25,263 and you see that also the dot down here then changes. 10 10 00:00:26,290 --> 00:00:28,390 And as we read the last slide, 11 11 00:00:28,390 --> 00:00:31,920 as indicated by this last thought. 12 12 00:00:31,920 --> 00:00:33,980 If we then go to the next one, 13 13 00:00:33,980 --> 00:00:38,220 it will basically go back to the first one like this. 14 14 00:00:38,220 --> 00:00:42,223 And of course, we can also click on the dots like this. 15 15 00:00:43,930 --> 00:00:47,180 So let's not understand how this is actually implemented 16 16 00:00:47,180 --> 00:00:51,480 in terms of HTML and CSS because as always, 17 17 00:00:51,480 --> 00:00:55,343 that's a very important aspect to make this all work. 18 18 00:00:58,790 --> 00:01:02,360 So this is the slider component. 19 19 00:01:02,360 --> 00:01:05,500 And then each slider has a couple of slides. 20 20 00:01:05,500 --> 00:01:09,763 So three slides and they are in fact, all side by side. 21 21 00:01:10,900 --> 00:01:15,510 So we have slide one, make the smaller here, 22 22 00:01:15,510 --> 00:01:17,940 because the content doesn't really matter. 23 23 00:01:17,940 --> 00:01:20,160 So you have these three slides. 24 24 00:01:20,160 --> 00:01:22,530 And so you see here by this blue area 25 25 00:01:22,530 --> 00:01:24,543 that they're all side by side. 26 26 00:01:25,690 --> 00:01:27,121 So here in the slider, 27 27 00:01:27,121 --> 00:01:30,760 we can turn off this overflow property 28 28 00:01:30,760 --> 00:01:34,030 which is set to hidden and then you can actually see 29 29 00:01:34,030 --> 00:01:37,313 the next slide already waiting there, basically. 30 30 00:01:38,440 --> 00:01:40,780 So what happens when we click this button 31 31 00:01:40,780 --> 00:01:45,330 is that all the slides move a little bit to the left side. 32 32 00:01:45,330 --> 00:01:49,660 So watch until you see that now the first slide is here, 33 33 00:01:49,660 --> 00:01:53,470 the second is in the middle and a third is right here. 34 34 00:01:53,470 --> 00:01:57,820 And that happens by using this transform CSS property, 35 35 00:01:57,820 --> 00:02:00,560 which we then set to translate x. 36 36 00:02:00,560 --> 00:02:03,890 And then here, we define these values to basically 37 37 00:02:03,890 --> 00:02:07,640 move each of the slides as we click these buttons. 38 38 00:02:07,640 --> 00:02:10,623 So watch what happens here in these values as I click. 39 39 00:02:11,710 --> 00:02:15,960 And so now the last slide here is basically at zero percent. 40 40 00:02:15,960 --> 00:02:18,710 The one before is that minus 100. 41 41 00:02:18,710 --> 00:02:21,390 And the one before is at minus 200. 42 42 00:02:21,390 --> 00:02:23,630 So minus is basically to the left, 43 43 00:02:23,630 --> 00:02:26,093 and the width of each slide is 100. 44 44 00:02:27,720 --> 00:02:30,790 And so basically, this is all we need to do 45 45 00:02:30,790 --> 00:02:33,030 in order to make this slide work. 46 46 00:02:33,030 --> 00:02:37,110 So basically adapt these percentages here as we go. 47 47 00:02:37,110 --> 00:02:40,260 So you see that now the first slide is zero percent, 48 48 00:02:40,260 --> 00:02:43,520 then the other one that 100 and a third one, 49 49 00:02:43,520 --> 00:02:47,790 which is all the way to the right side, is now at 200%. 50 50 00:02:47,790 --> 00:02:51,870 So this is basically the starting position of the slider. 51 51 00:02:51,870 --> 00:02:54,687 And let's compare that to what we have currently 52 52 00:02:54,687 --> 00:02:56,770 in our slider. 53 53 00:02:56,770 --> 00:02:58,530 So we have all of the slides 54 54 00:02:58,530 --> 00:03:01,670 basically on top of each other right now. 55 55 00:03:01,670 --> 00:03:04,660 And so the first thing that we should do here 56 56 00:03:04,660 --> 00:03:07,620 is to basically establish this initial condition 57 57 00:03:07,620 --> 00:03:10,063 where they are all side by side. 58 58 00:03:11,260 --> 00:03:12,580 So like this. 59 59 00:03:12,580 --> 00:03:14,780 And so what we're going to do on each of them 60 60 00:03:14,780 --> 00:03:19,060 is to set this transform property to these percentages. 61 61 00:03:19,060 --> 00:03:21,163 But of course, all automatically. 62 62 00:03:23,280 --> 00:03:25,283 So let's start here with our slider. 63 63 00:03:27,010 --> 00:03:29,760 And as always, I'm going to start with some selections. 64 64 00:03:31,400 --> 00:03:33,490 So starting with the slider, 65 65 00:03:33,490 --> 00:03:36,400 or actually with the slides themselves, 66 66 00:03:36,400 --> 00:03:38,580 so that we can then manipulate them. 67 67 00:03:38,580 --> 00:03:40,253 So document.querySelectorAll. 68 68 00:03:44,000 --> 00:03:45,660 And so that's a slide. 69 69 00:03:45,660 --> 00:03:48,920 So with the class of slide and we can also of course, 70 70 00:03:48,920 --> 00:03:51,693 see that here in our own HTML. 71 71 00:03:53,170 --> 00:03:56,020 So you see, here we have the slide. 72 72 00:03:56,020 --> 00:03:59,860 Now the content that is inside of each of these slides, 73 73 00:03:59,860 --> 00:04:03,270 is completely irrelevant for our purposes. 74 74 00:04:03,270 --> 00:04:07,370 So all we are concerned with is the slider element, 75 75 00:04:07,370 --> 00:04:09,010 and then this slide. 76 76 00:04:09,010 --> 00:04:11,030 So this one and all the others. 77 77 00:04:11,030 --> 00:04:13,983 So I can collapse these just to see. 78 78 00:04:14,860 --> 00:04:18,460 And so yeah, we are only going to be concerned 79 79 00:04:18,460 --> 00:04:20,760 with the slides and then you can maybe 80 80 00:04:20,760 --> 00:04:23,390 use this for your own projects in the future. 81 81 00:04:23,390 --> 00:04:26,660 And put whatever you want inside these slides. 82 82 00:04:26,660 --> 00:04:28,970 For example, you could just have images, 83 83 00:04:28,970 --> 00:04:31,400 or really anything that you want. 84 84 00:04:31,400 --> 00:04:34,520 And in fact, that's what I have down here. 85 85 00:04:34,520 --> 00:04:36,990 So here I only have some images, 86 86 00:04:36,990 --> 00:04:39,473 and maybe we should actually work with that. 87 87 00:04:40,830 --> 00:04:42,740 So let's actually try that. 88 88 00:04:42,740 --> 00:04:44,593 So I will comment out this part. 89 89 00:04:46,240 --> 00:04:51,033 So not really sure how that works anymore. 90 90 00:04:53,921 --> 00:04:58,921 And so now let's make this actually visible. 91 91 00:04:59,550 --> 00:05:00,423 Just to see. 92 92 00:05:06,250 --> 00:05:08,010 So these are our slides now. 93 93 00:05:08,010 --> 00:05:11,900 But once again, they're all on top of each other. 94 94 00:05:11,900 --> 00:05:14,543 And we can see that here when we inspect them. 95 95 00:05:17,530 --> 00:05:20,660 So indeed, all these slides are in the same position. 96 96 00:05:20,660 --> 00:05:23,350 And so let's create that starting condition 97 97 00:05:23,350 --> 00:05:25,700 that I mentioned a minute ago. 98 98 00:05:25,700 --> 00:05:28,233 So putting all the slides side by side. 99 99 00:05:30,580 --> 00:05:32,890 So let's take the slides. 100 100 00:05:32,890 --> 00:05:34,640 And we're going to loop through them 101 101 00:05:34,640 --> 00:05:37,440 and set the style on each of them. 102 102 00:05:37,440 --> 00:05:40,140 So let's create a simple arrow function here. 103 103 00:05:40,140 --> 00:05:42,670 And the parameters, I will just call S for slide. 104 104 00:05:42,670 --> 00:05:46,143 And then we also need the second one, which is the index. 105 105 00:05:46,980 --> 00:05:49,560 And you will see in a minute why that is. 106 106 00:05:49,560 --> 00:05:52,883 And so here, we want to set the style on each of the sides. 107 107 00:05:53,930 --> 00:05:56,240 And remember, it is the transform property 108 108 00:05:56,240 --> 00:05:57,343 that we want to set. 109 109 00:05:58,320 --> 00:06:02,683 So transform, and then we want to set it to translate x. 110 110 00:06:05,440 --> 00:06:09,163 And then here is where we have to specify the value. 111 111 00:06:09,163 --> 00:06:12,550 And that value is going to be in percentages. 112 112 00:06:12,550 --> 00:06:15,750 And let me just write down here what we want. 113 113 00:06:15,750 --> 00:06:19,190 So the first slide should be at zero percent, 114 114 00:06:19,190 --> 00:06:24,190 the second should be at 100%, then 200%, and then 300%. 115 115 00:06:26,762 --> 00:06:29,830 And so that's because translate x 116 116 00:06:29,830 --> 00:06:33,370 will basically move them to position 100%. 117 117 00:06:33,370 --> 00:06:36,910 So the width of each of these images is 100%. 118 118 00:06:36,910 --> 00:06:38,210 And so then the second image 119 119 00:06:38,210 --> 00:06:41,770 will start right here at the end of the first one. 120 120 00:06:41,770 --> 00:06:44,460 Then the third one will start right after the first one, 121 121 00:06:44,460 --> 00:06:48,840 which is at position 200% and then 300. 122 122 00:06:48,840 --> 00:06:51,363 So how can we calculate these values here? 123 123 00:06:52,390 --> 00:06:56,110 Well, we can simply multiply 100%. 124 124 00:06:56,110 --> 00:06:58,893 So here, we need now a JavaScript value. 125 125 00:06:59,730 --> 00:07:04,470 So we can multiply 100% by the current index. 126 126 00:07:04,470 --> 00:07:07,030 So in the beginning, that's going to be zero. 127 127 00:07:07,030 --> 00:07:09,560 So zero times 100, is zero. 128 128 00:07:09,560 --> 00:07:14,120 And then, as you see, it will go all the way until 300. 129 129 00:07:14,120 --> 00:07:17,980 Because in this case, we have four images or four slides. 130 130 00:07:17,980 --> 00:07:20,123 But if we were working with the other slides, 131 131 00:07:20,123 --> 00:07:22,890 then that would only go to 200%, 132 132 00:07:22,890 --> 00:07:25,500 because we only have three slides. 133 133 00:07:25,500 --> 00:07:27,263 So that should already be enough. 134 134 00:07:28,820 --> 00:07:30,400 And now we have this problem, 135 135 00:07:30,400 --> 00:07:32,728 that our sections here keep disappearing 136 136 00:07:32,728 --> 00:07:36,180 and that's because the code we wrote earlier. 137 137 00:07:36,180 --> 00:07:37,870 So reveal sections. 138 138 00:07:37,870 --> 00:07:41,083 And so for now, let's remove this observer. 139 139 00:07:46,020 --> 00:07:47,810 While the observer can actually stay, 140 140 00:07:47,810 --> 00:07:51,253 what we need to remove is these hidden classes. 141 141 00:07:53,280 --> 00:07:54,453 So now that works. 142 142 00:07:57,050 --> 00:07:59,550 And so let's check out the images now. 143 143 00:07:59,550 --> 00:08:00,963 And we can really see them. 144 144 00:08:04,520 --> 00:08:09,190 But indeed, they have now zero percent, 100, 200, 300, 145 145 00:08:09,190 --> 00:08:11,380 and so on and so forth. 146 146 00:08:11,380 --> 00:08:15,483 Let's maybe temporarily scale down the entire slider. 147 147 00:08:17,320 --> 00:08:20,360 So let's come here to or let's do 148 148 00:08:20,360 --> 00:08:22,673 that actually here in JavaScript. 149 149 00:08:23,620 --> 00:08:26,370 So just to make this a little bit easier for us to see. 150 150 00:08:27,820 --> 00:08:32,820 So const slider is document.querySelector, slider. 151 151 00:08:38,710 --> 00:08:39,543 And then what I want to do 152 152 00:08:39,543 --> 00:08:44,510 is slider.style.transform, and set it to scale. 153 153 00:08:47,450 --> 00:08:49,113 Let's say 0.5. 154 154 00:08:51,930 --> 00:08:53,610 Yeah, so that looks a bit better. 155 155 00:08:53,610 --> 00:08:56,400 Now, we just need to change that overflow 156 156 00:08:56,400 --> 00:08:57,900 that I just showed you before. 157 157 00:08:59,290 --> 00:09:02,510 So that overflow here, we need to set to visible. 158 158 00:09:02,510 --> 00:09:04,060 So also on the slider. 159 159 00:09:04,060 --> 00:09:07,254 So otherwise, we cannot see the other slides. 160 160 00:09:07,254 --> 00:09:10,143 So let's do that as well. 161 161 00:09:13,000 --> 00:09:15,030 So overflow, and we need to set it 162 162 00:09:15,030 --> 00:09:17,323 to hidden or actually to visible. 163 163 00:09:21,660 --> 00:09:23,560 Let's make this even smaller actually. 164 164 00:09:24,810 --> 00:09:28,023 Even smaller, just so we can see all the images. 165 165 00:09:29,150 --> 00:09:32,040 So you see now all the four of them are here. 166 166 00:09:32,040 --> 00:09:33,951 And our buttons are not really small. 167 167 00:09:33,951 --> 00:09:36,070 So they are still here. 168 168 00:09:36,070 --> 00:09:39,050 But I think we will be able to work with this. 169 169 00:09:39,050 --> 00:09:40,910 Maybe we can just move the whole thing 170 170 00:09:40,910 --> 00:09:42,470 a little bit to the left. 171 171 00:09:42,470 --> 00:09:47,420 So let's say translate x here as well. 172 172 00:09:47,420 --> 00:09:49,050 And keep in mind that this has nothing 173 173 00:09:49,050 --> 00:09:51,350 to do with the functionality. 174 174 00:09:51,350 --> 00:09:54,913 Okay, this is just so we can see what we are doing here. 175 175 00:09:56,690 --> 00:09:57,683 So this works. 176 176 00:10:00,282 --> 00:10:01,923 Now we can move it even further. 177 177 00:10:03,040 --> 00:10:05,533 And so now we can make it a bit bigger again. 178 178 00:10:10,180 --> 00:10:12,850 So that's beautiful, that works for now. 179 179 00:10:12,850 --> 00:10:15,900 And then by the end, we will simply remove all of this. 180 180 00:10:16,989 --> 00:10:19,990 But now let's actually get to work 181 181 00:10:19,990 --> 00:10:22,070 and make this slider work. 182 182 00:10:22,070 --> 00:10:24,883 And so I will start by selecting these two buttons. 183 183 00:10:26,490 --> 00:10:29,657 So that's the button left, query selector. 184 184 00:10:36,580 --> 00:10:37,910 Let's see here. 185 185 00:10:37,910 --> 00:10:41,083 So that's slider button left and button right. 186 186 00:10:46,762 --> 00:10:49,179 And then simply duplicate it. 187 187 00:10:59,090 --> 00:11:01,770 So button right.addEventListener. 188 188 00:11:04,630 --> 00:11:07,260 And let's start by only working now 189 189 00:11:07,260 --> 00:11:09,880 to make the slide go right, 190 190 00:11:09,880 --> 00:11:11,783 so clicking just on this button here. 191 191 00:11:13,120 --> 00:11:16,730 And I think we're not even going to need the event for now. 192 192 00:11:16,730 --> 00:11:20,933 Okay, so this is basically to go to the next slide. 193 193 00:11:21,950 --> 00:11:25,170 So remember that going to the next slide 194 194 00:11:25,170 --> 00:11:26,730 is basically simply changing 195 195 00:11:26,730 --> 00:11:29,820 the value here in the transform property. 196 196 00:11:29,820 --> 00:11:31,730 So this translate x, 197 197 00:11:31,730 --> 00:11:34,750 all we will do is to change the percentages. 198 198 00:11:34,750 --> 00:11:35,803 So that basically the slide 199 199 00:11:35,803 --> 00:11:39,483 that we want to move to is the one that has zero percent. 200 200 00:11:40,390 --> 00:11:42,783 So remember that this is what we did here. 201 201 00:11:44,200 --> 00:11:45,670 So right now the active one 202 202 00:11:45,670 --> 00:11:47,870 is the one that has zero percent, 203 203 00:11:47,870 --> 00:11:52,490 and the previous one has minus 100 and the other 100. 204 204 00:11:52,490 --> 00:11:54,340 So again, that is the whole mechanism 205 205 00:11:54,340 --> 00:11:57,430 that we're using here to move the slides. 206 206 00:11:57,430 --> 00:11:59,653 And so this is what we will do now. 207 207 00:12:00,920 --> 00:12:04,010 So in the beginning, we are at slide zero, 208 208 00:12:04,010 --> 00:12:06,300 but then when we want to go to the next slide, 209 209 00:12:06,300 --> 00:12:08,960 we need to increase that. 210 210 00:12:08,960 --> 00:12:11,980 So let's outside here, create a new variable 211 211 00:12:11,980 --> 00:12:13,243 for the current slide. 212 212 00:12:14,270 --> 00:12:18,580 So let current slide and it is a let 213 213 00:12:18,580 --> 00:12:21,523 because we will of course, then update it. 214 214 00:12:22,430 --> 00:12:27,430 So we start at zero and then when we go to the next slide, 215 215 00:12:27,470 --> 00:12:29,873 we simply increase that by one. 216 216 00:12:32,360 --> 00:12:35,840 All right, and so right now, it is one. 217 217 00:12:35,840 --> 00:12:37,824 And then what we need to do 218 218 00:12:37,824 --> 00:12:41,083 is to basically do the same as this, 219 219 00:12:42,220 --> 00:12:44,083 but with a small change. 220 220 00:12:46,432 --> 00:12:50,760 So let's say that the current slide is one, 221 221 00:12:50,760 --> 00:12:52,663 then we do not want this here. 222 222 00:12:54,240 --> 00:12:56,270 We don't want this, but instead 223 223 00:12:56,270 --> 00:12:59,053 we want the first slide to be minus 100. 224 224 00:13:00,080 --> 00:13:05,080 This one zero, this one 100, and the other one 200. 225 225 00:13:05,150 --> 00:13:06,433 So how do we do that? 226 226 00:13:07,400 --> 00:13:10,260 Well, we take the current index, 227 227 00:13:10,260 --> 00:13:13,420 and then we subtract the current slide. 228 228 00:13:13,420 --> 00:13:17,230 So again, we will take this, 229 229 00:13:17,230 --> 00:13:19,670 so each slide that we're looping over, 230 230 00:13:19,670 --> 00:13:22,493 and then minus the current slide. 231 231 00:13:23,730 --> 00:13:26,410 So like this, and then this will give us 232 232 00:13:26,410 --> 00:13:28,370 exactly what we want. 233 233 00:13:28,370 --> 00:13:31,883 So again, let's say that the current slide is one. 234 234 00:13:34,050 --> 00:13:36,013 Let's write that here, actually. 235 235 00:13:37,660 --> 00:13:40,420 And so then as we loop over these slides, 236 236 00:13:40,420 --> 00:13:42,800 in the first iteration this will be zero, 237 237 00:13:42,800 --> 00:13:45,860 and then zero minus one will be minus one. 238 238 00:13:45,860 --> 00:13:49,960 And then times 100 is of course, minus 100. 239 239 00:13:49,960 --> 00:13:52,870 Then the next slide, the index is one, 240 240 00:13:52,870 --> 00:13:56,360 and then one minus one is zero. 241 241 00:13:56,360 --> 00:13:59,110 And so that will then become zero percent. 242 242 00:13:59,110 --> 00:14:01,520 And so remember that the active slide 243 243 00:14:01,520 --> 00:14:05,460 is exactly the one that we want to be zero percent. 244 244 00:14:05,460 --> 00:14:08,770 And so this should now actually work. 245 245 00:14:08,770 --> 00:14:13,563 Let's see and yeah, it is already moving. 246 246 00:14:14,440 --> 00:14:17,550 So the first part is already doing its job. 247 247 00:14:17,550 --> 00:14:21,030 But now we are kind of at the last slide here. 248 248 00:14:21,030 --> 00:14:22,623 So let's see what happens next. 249 249 00:14:23,660 --> 00:14:25,483 So it actually keeps going. 250 250 00:14:26,320 --> 00:14:29,070 So the number of slides keeps increasing. 251 251 00:14:29,070 --> 00:14:32,510 And so of course, these values here also keep increasing. 252 252 00:14:32,510 --> 00:14:35,610 Because, well, JavaScript doesn't know 253 253 00:14:35,610 --> 00:14:37,550 that we are working a slider 254 254 00:14:37,550 --> 00:14:39,540 and so of course it doesn't stop. 255 255 00:14:39,540 --> 00:14:41,860 We need to tell it to stop. 256 256 00:14:41,860 --> 00:14:44,350 So how can we do that? 257 257 00:14:44,350 --> 00:14:47,210 Well, the best way is to actually define 258 258 00:14:47,210 --> 00:14:50,000 the number of slides and then make it stop 259 259 00:14:50,000 --> 00:14:51,803 once we reach the last one. 260 260 00:14:53,530 --> 00:14:56,253 So let's say that the next slide. 261 261 00:14:57,311 --> 00:15:01,910 So the maximum slide where we can go is slides.length. 262 262 00:15:03,870 --> 00:15:07,560 So basically the length of this node list here, 263 263 00:15:07,560 --> 00:15:11,280 and our node list, we can also read the length property, 264 264 00:15:11,280 --> 00:15:12,653 just like on an array. 265 265 00:15:14,210 --> 00:15:17,940 So here when we define the value of the current slide, 266 266 00:15:17,940 --> 00:15:21,180 we now need to update this a little bit. 267 267 00:15:21,180 --> 00:15:24,683 And so if we are at the next slide, 268 268 00:15:25,610 --> 00:15:29,313 so if the current slide is equal the next slide, 269 269 00:15:33,320 --> 00:15:36,423 then we want the current slide to become zero again. 270 270 00:15:37,310 --> 00:15:41,330 And so that's how we return to the beginning of the slides. 271 271 00:15:41,330 --> 00:15:45,203 And otherwise, we will simply increase the slides by one. 272 272 00:15:47,220 --> 00:15:49,313 Okay, so let's test that here. 273 273 00:15:51,390 --> 00:15:53,223 So everything keeps working. 274 274 00:15:54,690 --> 00:15:56,920 Now we are at slide number three. 275 275 00:15:56,920 --> 00:15:58,730 And so we are at the end. 276 276 00:15:58,730 --> 00:16:00,893 But actually, this next slide is four. 277 277 00:16:01,860 --> 00:16:04,850 So the length is four, but the index is three. 278 278 00:16:04,850 --> 00:16:06,580 And so as always, that's because 279 279 00:16:06,580 --> 00:16:09,270 the length is not zero based. 280 280 00:16:09,270 --> 00:16:11,760 So probably it will keep going one more time, 281 281 00:16:11,760 --> 00:16:14,630 and then it will return to the beginning. 282 282 00:16:14,630 --> 00:16:16,640 Yeah, beautiful. 283 283 00:16:16,640 --> 00:16:20,440 All we need to change here is to add minus one to this, 284 284 00:16:20,440 --> 00:16:24,010 to basically also make this zero based. 285 285 00:16:24,010 --> 00:16:26,223 And so now, let's see. 286 286 00:16:28,260 --> 00:16:31,450 Well, our slider is basically already working. 287 287 00:16:31,450 --> 00:16:35,380 So at least in this direction, so this button of course not. 288 288 00:16:35,380 --> 00:16:39,740 But here, we can see that it's doing its job already. 289 289 00:16:39,740 --> 00:16:41,740 So that's really nice. 290 290 00:16:41,740 --> 00:16:45,700 Let's now just quickly refactor this code a little bit. 291 291 00:16:45,700 --> 00:16:49,220 So we have here, basically the exact same code, 292 292 00:16:49,220 --> 00:16:51,760 or at least almost the same code as here. 293 293 00:16:51,760 --> 00:16:54,693 But we can refactor this into its own function. 294 294 00:16:55,590 --> 00:16:57,003 So let's grab this here. 295 295 00:16:59,300 --> 00:17:02,487 And I will create a function now called goToSlide. 296 296 00:17:07,322 --> 00:17:10,750 So that's a function where we pass in the slide. 297 297 00:17:10,750 --> 00:17:12,590 So basically, the number of the slide 298 298 00:17:12,590 --> 00:17:15,130 where we want to go to and then here, 299 299 00:17:15,130 --> 00:17:17,240 we change the current slide 300 300 00:17:17,240 --> 00:17:19,113 to the slide that we are indicating. 301 301 00:17:20,600 --> 00:17:22,600 And here, I can then call this goToSlide 302 302 00:17:24,894 --> 00:17:26,560 with the current slide. 303 303 00:17:26,560 --> 00:17:28,563 So far, we didn't change anything. 304 304 00:17:30,140 --> 00:17:32,033 Just delete this comment here. 305 305 00:17:32,870 --> 00:17:35,920 And now to be able to remove this part here, 306 306 00:17:35,920 --> 00:17:39,420 all we need to do is to basically call this function here, 307 307 00:17:39,420 --> 00:17:41,410 right in the beginning of our code 308 308 00:17:41,410 --> 00:17:43,453 with the slide set to zero. 309 309 00:17:44,600 --> 00:17:47,040 So this slight argument set to zero. 310 310 00:17:47,040 --> 00:17:49,800 And so what this will do is then basically, 311 311 00:17:49,800 --> 00:17:51,700 once our application starts, 312 312 00:17:51,700 --> 00:17:54,060 it immediately goes to slide zero. 313 313 00:17:54,060 --> 00:17:57,123 And so that will then execute basically this code. 314 314 00:17:58,630 --> 00:18:00,480 So slide will be zero. 315 315 00:18:00,480 --> 00:18:04,020 And so i minus zero is then of course just i 316 316 00:18:04,020 --> 00:18:06,223 and so that's 10, exactly what we have here. 317 317 00:18:07,370 --> 00:18:10,483 So go to slide zero. 318 318 00:18:13,824 --> 00:18:15,423 And so now I can delete this. 319 319 00:18:16,630 --> 00:18:17,623 And that's great. 320 320 00:18:19,070 --> 00:18:21,504 Then to make this just a bit more beautiful, 321 321 00:18:21,504 --> 00:18:24,314 let's actually also take this one here, 322 322 00:18:24,314 --> 00:18:26,723 and create a new function for that. 323 323 00:18:27,850 --> 00:18:30,940 So const nextSlide and put it here. 324 324 00:18:37,380 --> 00:18:39,720 And this one doesn't need any parameters. 325 325 00:18:39,720 --> 00:18:42,440 Because the goal of this is really just to export 326 326 00:18:42,440 --> 00:18:45,333 the functionality into its own named function. 327 327 00:18:49,240 --> 00:18:52,853 And so indeed, it keeps working just as before. 328 328 00:18:54,090 --> 00:18:58,970 Next up, let's then work on this button here. 329 329 00:18:58,970 --> 00:19:03,090 And so all I need to do is to add an event listener 330 330 00:19:03,090 --> 00:19:04,483 to button left. 331 331 00:19:08,220 --> 00:19:10,580 Also click and then I'm going to create 332 332 00:19:10,580 --> 00:19:15,580 a function called previous slide, or just prev slide. 333 333 00:19:17,550 --> 00:19:21,033 So let me create that here very quick as well. 334 334 00:19:22,180 --> 00:19:25,213 So const, brief slide. 335 335 00:19:29,280 --> 00:19:33,370 And so in this case, the current slide will be decreased. 336 336 00:19:33,370 --> 00:19:36,470 And then here, I can simply reuse the same function 337 337 00:19:36,470 --> 00:19:38,810 that I already wrote before, 338 338 00:19:38,810 --> 00:19:40,960 and also with the current slide. 339 339 00:19:40,960 --> 00:19:43,830 So the functionality of moving to a slide 340 340 00:19:43,830 --> 00:19:45,470 is of course exactly the same 341 341 00:19:45,470 --> 00:19:48,750 no matter if we go forward or upward. 342 342 00:19:48,750 --> 00:19:50,970 So all this will do is to update 343 343 00:19:50,970 --> 00:19:54,870 the transform property on all of the slides. 344 344 00:19:54,870 --> 00:19:56,870 And that works in always the same way 345 345 00:19:56,870 --> 00:20:00,550 no matter if we're going forwards or backwards. 346 346 00:20:00,550 --> 00:20:02,770 So the main difference between the next 347 347 00:20:02,770 --> 00:20:05,290 and the previous slide is really the way 348 348 00:20:05,290 --> 00:20:07,993 in which we determined the current slide. 349 349 00:20:09,130 --> 00:20:10,630 So when we go to the next slide, 350 350 00:20:10,630 --> 00:20:13,160 we basically increase the current slide. 351 351 00:20:13,160 --> 00:20:16,360 And when we go backwards, so to the previous slide, 352 352 00:20:16,360 --> 00:20:17,663 we simply decrease it. 353 353 00:20:19,380 --> 00:20:21,140 So let's try that now. 354 354 00:20:21,140 --> 00:20:23,110 And first we need to go forward, 355 355 00:20:23,110 --> 00:20:26,560 because our functionary is not really complete. 356 356 00:20:26,560 --> 00:20:30,280 But in this situation, it already works just fine. 357 357 00:20:30,280 --> 00:20:31,590 But then as we keep going, 358 358 00:20:31,590 --> 00:20:34,260 we have the same problem as before, 359 359 00:20:34,260 --> 00:20:37,620 because we simply keep decreasing the current slide. 360 360 00:20:37,620 --> 00:20:39,883 And so we now need to fix that. 361 361 00:20:41,050 --> 00:20:46,050 So in which situation does simply decreasing 362 362 00:20:46,210 --> 00:20:47,893 the current slide not work? 363 363 00:20:49,795 --> 00:20:52,110 So it works right now. 364 364 00:20:52,110 --> 00:20:53,972 So now it works. 365 365 00:20:53,972 --> 00:20:56,033 But now it does not work. 366 366 00:20:56,920 --> 00:20:58,490 And so that is in the situation 367 367 00:20:58,490 --> 00:21:01,053 where the current slide is already zero. 368 368 00:21:02,610 --> 00:21:04,150 So that's right. 369 369 00:21:04,150 --> 00:21:09,150 If the current slide is zero. 370 370 00:21:09,410 --> 00:21:11,760 So in this case, the current slide 371 371 00:21:11,760 --> 00:21:15,433 should be equal to the next slide. 372 372 00:21:16,280 --> 00:21:18,051 And again, that's minus one, 373 373 00:21:18,051 --> 00:21:22,713 because that next slide is not zero based. 374 374 00:21:24,890 --> 00:21:27,060 And then else and so now, 375 375 00:21:30,286 --> 00:21:32,743 that should actually work. 376 376 00:21:35,670 --> 00:21:39,803 And indeed beautiful. 377 377 00:21:41,210 --> 00:21:44,590 And so now, our slider is actually working already. 378 378 00:21:44,590 --> 00:21:46,653 We are just missing a couple of features. 379 379 00:21:47,500 --> 00:21:50,833 So namely, these dots here, 380 380 00:21:52,100 --> 00:21:54,660 which is a little bit complicated to implement. 381 381 00:21:54,660 --> 00:21:56,160 And also in this version, 382 382 00:21:56,160 --> 00:22:00,100 we can use the arrow left and arrow right functions 383 383 00:22:00,100 --> 00:22:02,023 to move through the slider. 384 384 00:22:03,790 --> 00:22:06,400 So now I'm just hitting the left button, 385 385 00:22:06,400 --> 00:22:07,573 and the right button. 386 386 00:22:09,020 --> 00:22:11,653 But I'm going to leave that for the next video. 387 387 00:22:12,690 --> 00:22:16,830 For now, let's just get rid of these things 388 388 00:22:16,830 --> 00:22:18,280 that we did in the beginning, 389 389 00:22:19,650 --> 00:22:22,396 so that we can see the actual slider 390 390 00:22:22,396 --> 00:22:24,377 in all its beauty (laughs). 391 391 00:22:25,940 --> 00:22:30,010 So now, it does indeed look like a real slider, 392 392 00:22:30,010 --> 00:22:30,843 doesn't it? 393 393 00:22:31,860 --> 00:22:33,900 So I'm really happy with this result. 394 394 00:22:33,900 --> 00:22:36,100 And I hope that you're as well. 395 395 00:22:36,100 --> 00:22:38,490 And of course, I wouldn't expect you 396 396 00:22:38,490 --> 00:22:42,460 to be able to write this code on your own just yet. 397 397 00:22:42,460 --> 00:22:44,490 So when we implement something like this, 398 398 00:22:44,490 --> 00:22:46,850 there is a lot of stuff to think about, 399 399 00:22:46,850 --> 00:22:48,300 especially in this case, 400 400 00:22:48,300 --> 00:22:52,130 the most tricky part is in my opinion this here. 401 401 00:22:52,130 --> 00:22:54,860 And this probably comes from experience. 402 402 00:22:54,860 --> 00:22:57,460 And so at a certain point, if you practice enough, 403 403 00:22:57,460 --> 00:23:01,260 you will also be able to come up with a logic like this. 404 404 00:23:01,260 --> 00:23:03,350 So I just invite you to study this code 405 405 00:23:03,350 --> 00:23:05,990 here a little bit before we move on. 406 406 00:23:05,990 --> 00:23:07,730 And once you're done doing that, 407 407 00:23:07,730 --> 00:23:10,600 then let's move on and implement these dots 408 408 00:23:10,600 --> 00:23:13,663 at the bottom of the slider that I just showed you. 35478