WEBVTT 1 00:00:01.260 --> 00:00:04.683 Let's now continue building our slider component. 2 00:00:06.300 --> 00:00:09.360 And let's actually start by attaching an event handler 3 00:00:09.360 --> 00:00:11.220 to a keyboard event 4 00:00:11.220 --> 00:00:14.580 so that we can also slide through the slider 5 00:00:14.580 --> 00:00:16.983 using the left and right arrow keys. 6 00:00:18.030 --> 00:00:20.883 So let's do that after these ones here. 7 00:00:21.990 --> 00:00:25.140 And remember that we actually handle keyboard events 8 00:00:25.140 --> 00:00:27.573 right at the document.addEventListener. 9 00:00:29.790 --> 00:00:34.170 and then we're gonna use the keydown event. 10 00:00:34.170 --> 00:00:35.550 And so that's gonna be fired 11 00:00:35.550 --> 00:00:38.970 as soon as the key is pressed down. 12 00:00:38.970 --> 00:00:40.413 And here we need the event. 13 00:00:41.340 --> 00:00:45.690 And let's start by taking a look here at the event 14 00:00:45.690 --> 00:00:47.020 so that we can figure out 15 00:00:48.420 --> 00:00:50.193 which keys we actually want to use. 16 00:00:51.420 --> 00:00:53.793 So I'm gonna hit the right arrow key, 17 00:00:54.990 --> 00:00:59.913 and so you see that we get the key here as ArrowRight. 18 00:01:00.775 --> 00:01:04.530 And then the other way around it is, of course, ArrowLeft. 19 00:01:04.530 --> 00:01:08.630 And so I'm gonna use that key, ArrowLeft and ArrowRight. 20 00:01:11.760 --> 00:01:13.350 So that's very simple. 21 00:01:13.350 --> 00:01:14.890 If e.key 22 00:01:16.327 --> 00:01:19.197 === 'ArrowLeft', 23 00:01:20.670 --> 00:01:23.070 then what we want to do is to call 24 00:01:23.070 --> 00:01:27.900 the previous slide function, right? 25 00:01:27.900 --> 00:01:29.610 And so this is also a reason 26 00:01:29.610 --> 00:01:32.493 why I created a separate function for this. 27 00:01:33.360 --> 00:01:35.250 Okay, so otherwise 28 00:01:35.250 --> 00:01:38.310 I could also have left the entire code just here 29 00:01:38.310 --> 00:01:41.760 instead of exporting it into its own function. 30 00:01:41.760 --> 00:01:43.410 I still prefer it like this, 31 00:01:43.410 --> 00:01:45.720 but it wouldn't have been necessary. 32 00:01:45.720 --> 00:01:48.780 But now as we need to reuse the same code here as well, 33 00:01:48.780 --> 00:01:52.593 then I really would have to create it its own function. 34 00:01:53.520 --> 00:01:54.630 Now you might have noticed 35 00:01:54.630 --> 00:01:58.410 that here we also could have used like short circuiting, 36 00:01:58.410 --> 00:02:00.760 so we could do e.key 37 00:02:02.024 --> 00:02:02.857 === 'ArrowRight' 38 00:02:07.682 --> 00:02:10.710 && nextSlide();. 39 00:02:10.710 --> 00:02:12.510 So this would work the same way 40 00:02:12.510 --> 00:02:14.343 because of short circuiting, right? 41 00:02:15.450 --> 00:02:16.653 At least I hope so. 42 00:02:17.850 --> 00:02:19.290 And yeah, it does. 43 00:02:19.290 --> 00:02:21.130 So I just hit the right key 44 00:02:22.440 --> 00:02:23.643 and here the left key, 45 00:02:25.320 --> 00:02:27.660 and so it works just as fine. 46 00:02:27.660 --> 00:02:31.110 So you can now choose which version you like the most. 47 00:02:31.110 --> 00:02:33.210 So I'm gonna leave both here 48 00:02:33.210 --> 00:02:36.420 and let you decide which one you want to use. 49 00:02:36.420 --> 00:02:40.740 Now right, but now about the dots that I was talking about, 50 00:02:40.740 --> 00:02:43.510 let's go here to our HTML 51 00:02:44.580 --> 00:02:48.780 because here we actually already have a div, 52 00:02:48.780 --> 00:02:50.700 so an element for that. 53 00:02:50.700 --> 00:02:53.430 So we have the buttons, of course, these two. 54 00:02:53.430 --> 00:02:56.040 And then we also have this empty container 55 00:02:56.040 --> 00:02:58.470 in which we're gonna create the dots. 56 00:02:58.470 --> 00:03:00.873 So let's start by selecting that element, 57 00:03:02.430 --> 00:03:06.183 and I'm gonna call it the dotContainer. 58 00:03:16.590 --> 00:03:19.890 So that's just dots, I think. 59 00:03:19.890 --> 00:03:21.033 Yeah, that's correct. 60 00:03:21.870 --> 00:03:26.343 And so let's start by creating all these dots in there. 61 00:03:28.020 --> 00:03:30.423 So I'm gonna create a new function here. 62 00:03:31.560 --> 00:03:34.350 So basically I'm nicely organizing 63 00:03:34.350 --> 00:03:36.660 the entire code of this slider here 64 00:03:36.660 --> 00:03:38.340 into different functions, 65 00:03:38.340 --> 00:03:41.763 and so that's a good pattern to get used to, all right? 66 00:03:43.470 --> 00:03:47.283 So just so you see what these dots will actually look like, 67 00:03:49.410 --> 00:03:52.170 so each dot is gonna be one element 68 00:03:52.170 --> 00:03:54.357 with the class of dots__dot, 69 00:03:54.357 --> 00:03:57.810 and then it'll have this data attribute of slide 70 00:03:57.810 --> 00:03:59.520 with the number of the slide 71 00:03:59.520 --> 00:04:02.430 that clicking the button will go to. 72 00:04:02.430 --> 00:04:04.200 All right, so one more time. 73 00:04:04.200 --> 00:04:07.260 The data attribute here holds some data that we need 74 00:04:07.260 --> 00:04:09.693 in order to make the functionality work. 75 00:04:10.560 --> 00:04:13.200 Let's actually grab this code here. 76 00:04:13.200 --> 00:04:15.093 So I'm copying all of it now. 77 00:04:17.640 --> 00:04:20.460 And so what we want to do here now 78 00:04:20.460 --> 00:04:24.630 is to create one element like this for each of the slides. 79 00:04:24.630 --> 00:04:26.640 So the easiest way of doing that 80 00:04:26.640 --> 00:04:28.840 is to simply loop over the slides 81 00:04:29.730 --> 00:04:33.423 because then we can do something for each of them. 82 00:04:33.423 --> 00:04:36.750 And in this case, it's not even gonna be about the slides, 83 00:04:36.750 --> 00:04:39.180 it's just so that we can do it four times 84 00:04:39.180 --> 00:04:40.833 because we have four slides. 85 00:04:41.760 --> 00:04:45.330 So we have the slide again and then the index. 86 00:04:45.330 --> 00:04:46.163 But in this case, 87 00:04:46.163 --> 00:04:49.413 we're really only gonna be interested in the index. 88 00:04:50.340 --> 00:04:52.190 So missing the function keyword here. 89 00:04:53.130 --> 00:04:55.740 And actually since we're not interested in the slides, 90 00:04:55.740 --> 00:05:00.360 we can again use this convention of the throwaway variable, 91 00:05:00.360 --> 00:05:02.283 so a variable that we don't even need. 92 00:05:03.870 --> 00:05:08.870 And so let's now say dotContainer.insertAdjacentHTML. 93 00:05:09.870 --> 00:05:11.010 So as I mentioned, 94 00:05:11.010 --> 00:05:15.690 this is my favorite way of creating HTML elements. 95 00:05:15.690 --> 00:05:17.823 And so let's say beforeend, 96 00:05:19.080 --> 00:05:22.470 so basically adding it as the last child always. 97 00:05:22.470 --> 00:05:26.460 And then here we need the HTML code itself. 98 00:05:26.460 --> 00:05:28.920 And so let me just paste that button, 99 00:05:28.920 --> 00:05:32.340 so that code that I copied from the demo site. 100 00:05:32.340 --> 00:05:36.753 And now here all we need to do is to add the index. 101 00:05:38.310 --> 00:05:41.490 And so then the first button will get index 0, 102 00:05:41.490 --> 00:05:43.350 then 2, 3, and 4 103 00:05:43.350 --> 00:05:44.640 so that in the next step 104 00:05:44.640 --> 00:05:47.730 we can then read this value from here 105 00:05:47.730 --> 00:05:50.190 and move exactly to that slide 106 00:05:50.190 --> 00:05:52.233 once one of the dots is clicked. 107 00:05:55.080 --> 00:05:57.510 So let's check that out. 108 00:05:57.510 --> 00:06:00.753 Oh, and of course we need to also call this function. 109 00:06:01.680 --> 00:06:03.660 So in the beginning we need to call, 110 00:06:03.660 --> 00:06:06.423 goToSlide and also createDots. 111 00:06:08.250 --> 00:06:09.500 So createDots, 112 00:06:10.500 --> 00:06:14.400 and I will organize this a bit nicer by the end. 113 00:06:14.400 --> 00:06:17.100 For now, let's just leave it like this. 114 00:06:17.100 --> 00:06:20.193 Oh, and you see we have the four dots now here. 115 00:06:21.450 --> 00:06:23.340 All right, let's check them out here 116 00:06:23.340 --> 00:06:26.850 just to see the data-slide attribute , 117 00:06:26.850 --> 00:06:29.853 and indeed 0, 1, 2, and 3. 118 00:06:30.930 --> 00:06:33.393 And now let's actually make them work. 119 00:06:34.320 --> 00:06:36.783 So adding another event handler here. 120 00:06:37.620 --> 00:06:39.900 And I'd like to keep the event handlers 121 00:06:39.900 --> 00:06:42.780 or event listeners here at the bottom. 122 00:06:42.780 --> 00:06:47.010 And so of course we are gonna use again, event delegation. 123 00:06:47.010 --> 00:06:50.700 So we're not gonna attach one event handler to each dot, 124 00:06:50.700 --> 00:06:52.980 but instead to the common parent. 125 00:06:52.980 --> 00:06:56.010 And so that is of course the dotContainer 126 00:06:56.010 --> 00:06:58.203 into which we just added the dots. 127 00:06:59.280 --> 00:07:03.393 So addEventListener waiting for a click. 128 00:07:06.750 --> 00:07:08.910 And now to actually match the element 129 00:07:08.910 --> 00:07:10.920 that we're interested in, 130 00:07:10.920 --> 00:07:14.040 we can simply now check for the class. 131 00:07:14.040 --> 00:07:16.480 So that's event.target 132 00:07:17.405 --> 00:07:20.170 .classList 133 00:07:22.417 --> 00:07:23.493 .contains. 134 00:07:24.330 --> 00:07:26.010 And then the class of the dots 135 00:07:26.010 --> 00:07:27.657 is dots__dot. 136 00:07:34.320 --> 00:07:36.060 All right, and if so, 137 00:07:36.060 --> 00:07:38.943 let's just log that to the console pretty quick. 138 00:07:43.470 --> 00:07:45.090 So here we get dot, 139 00:07:45.090 --> 00:07:47.970 if we click outside somewhere, nothing happens, 140 00:07:47.970 --> 00:07:49.923 and then again dot and dot. 141 00:07:50.820 --> 00:07:53.800 All right, so let's get the slide 142 00:07:54.900 --> 00:07:57.120 so const slide 143 00:07:57.120 --> 00:08:00.010 is = e.target 144 00:08:01.267 --> 00:08:04.977 .dataset.slide. 145 00:08:04.977 --> 00:08:09.630 And so that's because it's called data-slide. 146 00:08:09.630 --> 00:08:10.770 And so as always, 147 00:08:10.770 --> 00:08:14.580 all the custom data attributes are in the dataset 148 00:08:14.580 --> 00:08:17.373 and then dot this value, so .slide. 149 00:08:19.110 --> 00:08:21.150 So .slide. 150 00:08:21.150 --> 00:08:22.710 And to make it even better, 151 00:08:22.710 --> 00:08:24.540 we can now use the structuring 152 00:08:24.540 --> 00:08:28.200 because this value is exactly the same as this. 153 00:08:28.200 --> 00:08:30.720 And so we're reading from this object, 154 00:08:30.720 --> 00:08:32.283 and so we can simply do this. 155 00:08:33.510 --> 00:08:36.723 So another nice use case of the structuring right there. 156 00:08:37.890 --> 00:08:39.690 And so now what we want to do 157 00:08:39.690 --> 00:08:43.950 is to basically go to the slide that we just selected. 158 00:08:43.950 --> 00:08:45.000 And so one more time, 159 00:08:45.000 --> 00:08:49.350 it's now very handy to have this goToSlide function here 160 00:08:49.350 --> 00:08:52.173 inside its own separate function. 161 00:08:54.660 --> 00:08:55.893 So goToSlide 162 00:08:57.632 --> 00:08:59.160 and then with the slide number 163 00:08:59.160 --> 00:09:01.533 that we just read from the dataset. 164 00:09:03.210 --> 00:09:04.383 So let's test that, 165 00:09:05.730 --> 00:09:07.290 and it works. 166 00:09:07.290 --> 00:09:08.970 So slide two. 167 00:09:08.970 --> 00:09:10.620 Let's see slide one. 168 00:09:10.620 --> 00:09:12.663 Let's go straight to the last one, 169 00:09:13.830 --> 00:09:16.080 and it jumped over all the others 170 00:09:16.080 --> 00:09:18.480 and now we are at the last one. 171 00:09:18.480 --> 00:09:20.850 And of course we can combine this now 172 00:09:20.850 --> 00:09:23.463 with the buttons and with the keyboard arrows. 173 00:09:25.710 --> 00:09:27.990 And so yeah, 174 00:09:27.990 --> 00:09:30.810 great, this works as well. 175 00:09:30.810 --> 00:09:32.100 Now all we need to do 176 00:09:32.100 --> 00:09:36.150 is to also show which is the current slide. 177 00:09:36.150 --> 00:09:39.420 So activate this dot basically, 178 00:09:39.420 --> 00:09:42.300 so give it this different background color. 179 00:09:42.300 --> 00:09:46.320 So that's also pretty common in a slider like this, 180 00:09:46.320 --> 00:09:49.560 and let me actually show it to you. 181 00:09:49.560 --> 00:09:53.460 So all we do as always is to give it a special class, 182 00:09:53.460 --> 00:09:55.833 so the dots__dot active class. 183 00:09:56.850 --> 00:10:00.900 So let's go back and let's do that not here, 184 00:10:00.900 --> 00:10:02.640 but in another function 185 00:10:02.640 --> 00:10:06.000 because we need this functionality in many places. 186 00:10:06.000 --> 00:10:08.310 So whenever we change the slide, 187 00:10:08.310 --> 00:10:11.283 we will also need to change the indicator here. 188 00:10:12.540 --> 00:10:14.970 So no matter if we click on one of the dots 189 00:10:14.970 --> 00:10:17.820 or if we just use these buttons here, 190 00:10:17.820 --> 00:10:19.290 whenever we change the slide, 191 00:10:19.290 --> 00:10:23.850 we want to change which slide is currently the active one. 192 00:10:23.850 --> 00:10:25.440 And so we're gonna create 193 00:10:25.440 --> 00:10:27.490 a completely different function for that, 194 00:10:29.010 --> 00:10:31.083 and let's do it here after createDots. 195 00:10:34.410 --> 00:10:36.933 So activateDot. 196 00:10:39.270 --> 00:10:40.660 And here we need to again 197 00:10:41.580 --> 00:10:44.763 then pass in the current slide basically. 198 00:10:46.380 --> 00:10:47.883 So how will we do that? 199 00:10:48.750 --> 00:10:50.430 Well, it's gonna be a bit similar 200 00:10:50.430 --> 00:10:52.860 to what we have here with these buttons. 201 00:10:52.860 --> 00:10:55.470 So here we also had like an active class 202 00:10:55.470 --> 00:10:59.190 to show which one is the active button here. 203 00:10:59.190 --> 00:11:00.630 And to do that, 204 00:11:00.630 --> 00:11:03.630 remember before we activated one of them, 205 00:11:03.630 --> 00:11:05.943 we first deactivated all of them, 206 00:11:06.799 --> 00:11:08.853 and so here we are gonna do the same. 207 00:11:10.350 --> 00:11:12.480 So we will select all of the dots 208 00:11:12.480 --> 00:11:14.970 each time that we want to activate one, 209 00:11:14.970 --> 00:11:18.210 and we will then remove that active class 210 00:11:18.210 --> 00:11:22.110 and then add it only on the one that we're interested in. 211 00:11:22.110 --> 00:11:24.303 So let's select all the dots, 212 00:11:25.721 --> 00:11:28.540 so that's document.querySelector 213 00:11:29.460 --> 00:11:32.012 and actually querySelectorAll. 214 00:11:32.012 --> 00:11:35.513 And so the dots are the one that have this class. 215 00:11:39.810 --> 00:11:41.223 And then forEach of them, 216 00:11:43.710 --> 00:11:45.723 so let's call it dot, 217 00:11:48.210 --> 00:11:52.240 we want to say dot.classList.remove 218 00:11:54.180 --> 00:11:58.590 this class --active. 219 00:11:58.590 --> 00:12:03.570 So that's the first step of removing all the active classes, 220 00:12:03.570 --> 00:12:04.560 and then we will add it 221 00:12:04.560 --> 00:12:06.873 only on the one that we are interested in. 222 00:12:07.980 --> 00:12:11.163 So how do we select the one that we actually want? 223 00:12:12.000 --> 00:12:16.620 Well, we can do that also based on the data attribute. 224 00:12:16.620 --> 00:12:18.870 So that's gonna be a bit complicated, 225 00:12:18.870 --> 00:12:20.163 so let me show you how. 226 00:12:22.410 --> 00:12:24.900 So a document.querySelector, 227 00:12:24.900 --> 00:12:26.070 and so here the query 228 00:12:26.070 --> 00:12:28.413 is gonna be a little bit more complicated. 229 00:12:29.250 --> 00:12:32.013 So it's still dots__dot, 230 00:12:32.880 --> 00:12:36.423 but now we want to select based on the data-slide attribute, 231 00:12:37.530 --> 00:12:41.070 so basically based on this attribute, 232 00:12:41.070 --> 00:12:43.203 and we can create a selector for that. 233 00:12:45.810 --> 00:12:48.900 So remember how previously we used these brackets 234 00:12:48.900 --> 00:12:51.990 to select for images with a certain attribute. 235 00:12:51.990 --> 00:12:54.000 And so here we can do that as well 236 00:12:54.000 --> 00:12:57.300 and even check if they have a certain value. 237 00:12:57.300 --> 00:12:59.993 So data-slide=, 238 00:13:01.410 --> 00:13:05.193 and so they should have exactly the value of slide. 239 00:13:06.910 --> 00:13:09.300 And so then the selected dot 240 00:13:09.300 --> 00:13:14.160 we can add to the class list or class, 241 00:13:14.160 --> 00:13:15.333 so the active class, 242 00:13:17.790 --> 00:13:19.113 just like this. 243 00:13:20.340 --> 00:13:23.790 So let's say we pass in slide number two, 244 00:13:23.790 --> 00:13:25.680 so we want to activate the dot 245 00:13:25.680 --> 00:13:28.140 corresponding to slide number two. 246 00:13:28.140 --> 00:13:30.750 And so here in this querySelector, 247 00:13:30.750 --> 00:13:33.960 we can basically select the element with this class 248 00:13:33.960 --> 00:13:38.960 and with this data-slide attribute set to 2. 249 00:13:39.270 --> 00:13:42.480 So write like this, okay? 250 00:13:42.480 --> 00:13:45.270 And here that's active. 251 00:13:45.270 --> 00:13:48.240 And so now that should actually be working already. 252 00:13:48.240 --> 00:13:51.270 All we need to do is now call this function here 253 00:13:51.270 --> 00:13:53.073 in all the necessary places. 254 00:13:53.970 --> 00:13:56.250 So when we go to the next slide, 255 00:13:56.250 --> 00:13:58.230 we go to the slide, of course, 256 00:13:58.230 --> 00:14:00.723 and then we also want to activate the dot. 257 00:14:02.640 --> 00:14:04.383 And also on the current slide, 258 00:14:05.490 --> 00:14:08.163 and then the same when we go to the previous slide, 259 00:14:09.660 --> 00:14:13.680 activateDot with the current slide. 260 00:14:13.680 --> 00:14:16.683 And finally when we click on one of the dots, 261 00:14:17.940 --> 00:14:19.383 so activateDot, 262 00:14:21.000 --> 00:14:22.623 and here it's just called slide. 263 00:14:24.990 --> 00:14:26.553 Okay, let's try that. 264 00:14:27.630 --> 00:14:30.540 And did it work or not? 265 00:14:30.540 --> 00:14:33.070 Well, it's hard to see actually here 266 00:14:34.140 --> 00:14:36.150 because of these images, 267 00:14:36.150 --> 00:14:40.290 but yeah, apparently it is working, 268 00:14:40.290 --> 00:14:43.140 although it looks kind of the same as all the other dots. 269 00:14:44.610 --> 00:14:48.690 So let's change that here, the style. 270 00:14:48.690 --> 00:14:50.733 But yeah, it's very hard here, 271 00:14:52.050 --> 00:14:54.843 so let me change the class here. 272 00:15:00.270 --> 00:15:02.403 So let's actually change it to white, 273 00:15:03.870 --> 00:15:05.703 so reactivate this one here. 274 00:15:06.870 --> 00:15:09.990 Now, and yeah, you can see that it actually works 275 00:15:09.990 --> 00:15:12.003 so now that's a bit better visible. 276 00:15:14.850 --> 00:15:18.420 So that works just fine in all directions, 277 00:15:18.420 --> 00:15:20.760 so even with the arrow, of course. 278 00:15:20.760 --> 00:15:22.440 And when we click a dot, 279 00:15:22.440 --> 00:15:24.510 then the same works as well. 280 00:15:24.510 --> 00:15:26.040 There's just one problem, 281 00:15:26.040 --> 00:15:28.350 which is when we reload this, 282 00:15:28.350 --> 00:15:30.483 then none of the slides is active. 283 00:15:31.800 --> 00:15:33.390 So let's go back here, 284 00:15:33.390 --> 00:15:35.642 and also in the beginning call 285 00:15:35.642 --> 00:15:39.783 this activateDot function with slide 0. 286 00:15:41.160 --> 00:15:44.630 So activateDot(0);. 287 00:15:46.470 --> 00:15:50.160 And so now you see the first dot is now active. 288 00:15:50.160 --> 00:15:52.980 Great, so that's actually it. 289 00:15:52.980 --> 00:15:55.470 Our slider is working now. 290 00:15:55.470 --> 00:15:58.770 Let's just refactor our code just a little bit 291 00:15:58.770 --> 00:16:00.870 and make it a bit better. 292 00:16:00.870 --> 00:16:05.550 So for example, we have all of these function calls here, 293 00:16:05.550 --> 00:16:08.010 so let's put them all in the same function, 294 00:16:08.010 --> 00:16:10.410 which I'm gonna call a knit. 295 00:16:10.410 --> 00:16:14.760 So an knit function, an initialization function. 296 00:16:14.760 --> 00:16:16.630 So here we have our event handlers 297 00:16:20.250 --> 00:16:23.100 and then here, our functions. 298 00:16:23.100 --> 00:16:26.163 So I'm calling the function that doesn't even exist yet, 299 00:16:27.270 --> 00:16:32.270 so that's better. 300 00:16:32.550 --> 00:16:35.370 And now I will simply put all of these here 301 00:16:35.370 --> 00:16:37.080 just so that we know a bit better 302 00:16:37.080 --> 00:16:41.520 what exactly we are gonna do in the beginning basically 303 00:16:41.520 --> 00:16:43.173 to initialize our slider. 304 00:16:45.270 --> 00:16:47.610 And there should be one more. 305 00:16:47.610 --> 00:16:49.890 Yeah, that's to create the dots. 306 00:16:49.890 --> 00:16:53.850 And that should probably happen before we activate any dot. 307 00:16:53.850 --> 00:16:56.463 Otherwise, that's not gonna work probably. 308 00:16:58.500 --> 00:17:01.410 So here we have then our functions, 309 00:17:01.410 --> 00:17:03.273 let's just write that here as well. 310 00:17:05.460 --> 00:17:07.710 And this one, we don't need anymore, in fact. 311 00:17:10.710 --> 00:17:12.180 And now just to finish, 312 00:17:12.180 --> 00:17:16.860 let's actually put all of this code into a function as well, 313 00:17:16.860 --> 00:17:20.703 and so this way we do not pollute the global namespace. 314 00:17:21.540 --> 00:17:23.280 So that's something we like to say, 315 00:17:23.280 --> 00:17:26.340 and we're gonna talk a little bit more about this 316 00:17:26.340 --> 00:17:28.950 also later in the course still. 317 00:17:28.950 --> 00:17:32.370 But for now, just know that it is a good practice 318 00:17:32.370 --> 00:17:34.770 to keep this kind of functionality here 319 00:17:34.770 --> 00:17:36.303 maybe in its own function. 320 00:17:40.800 --> 00:17:44.220 So let me 321 00:17:44.220 --> 00:17:45.930 actually delete this one 322 00:17:45.930 --> 00:17:49.833 and just put one curly brace at the very end here. 323 00:17:50.730 --> 00:17:53.703 And then all we need to do is to call that function, 324 00:17:55.320 --> 00:17:56.253 and that's it. 325 00:17:57.540 --> 00:17:59.640 So now we have our slider working 326 00:17:59.640 --> 00:18:03.300 and we could now actually even pass in some values here. 327 00:18:03.300 --> 00:18:05.070 And to make this even more complete, 328 00:18:05.070 --> 00:18:09.000 we could actually pass in like some options here. 329 00:18:09.000 --> 00:18:10.770 So we could make this slider function 330 00:18:10.770 --> 00:18:13.740 accept a couple of options, 331 00:18:13.740 --> 00:18:15.210 so an object, for example, 332 00:18:15.210 --> 00:18:17.070 which contains these options, 333 00:18:17.070 --> 00:18:18.810 and then work with that. 334 00:18:18.810 --> 00:18:21.600 But that's a bit too much for this example, 335 00:18:21.600 --> 00:18:24.693 but just know that this is a pretty common thing to do. 336 00:18:26.100 --> 00:18:28.830 So great, this slider works. 337 00:18:28.830 --> 00:18:32.460 Let's just actually go back, 338 00:18:32.460 --> 00:18:33.930 deleting these slides, 339 00:18:33.930 --> 00:18:35.460 we don't need them anymore, 340 00:18:35.460 --> 00:18:38.280 and put back our original content. 341 00:18:38.280 --> 00:18:41.133 And so you will see then that it works just the same, 342 00:18:42.270 --> 00:18:44.343 and indeed it does. 343 00:18:45.570 --> 00:18:50.223 So I'm just gonna change the color of the dot back here, 344 00:18:52.410 --> 00:18:54.153 and then that's it. 345 00:18:56.220 --> 00:18:58.500 So everything works the same 346 00:18:58.500 --> 00:19:00.960 no matter how many slides we have. 347 00:19:00.960 --> 00:19:03.930 So, of course, now we have only three dots, 348 00:19:03.930 --> 00:19:06.390 but everything just works the same. 349 00:19:06.390 --> 00:19:09.930 So the slider is really being built dynamically 350 00:19:09.930 --> 00:19:12.120 based on the number of slide elements 351 00:19:12.120 --> 00:19:13.893 that we create in our markup. 352 00:19:15.930 --> 00:19:20.370 Okay, so we're almost done with this project now. 353 00:19:20.370 --> 00:19:22.710 There's just two more small lectures 354 00:19:22.710 --> 00:19:25.440 in which we're gonna learn a little bit more. 355 00:19:25.440 --> 00:19:27.300 And so after reviewing this code 356 00:19:27.300 --> 00:19:29.790 for this really cool component, 357 00:19:29.790 --> 00:19:33.333 let's then just quickly check out these final two lectures.