Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,260 --> 00:00:03,270 Let's now continue building 2 2 00:00:03,270 --> 00:00:04,663 our slider component. 3 3 00:00:06,310 --> 00:00:09,380 And let's actually start by attaching an event handler 4 4 00:00:09,380 --> 00:00:11,210 to a keyboard event 5 5 00:00:11,210 --> 00:00:14,570 so that we can also slide through the slider 6 6 00:00:14,570 --> 00:00:16,993 using the left and right arrow keys. 7 7 00:00:18,040 --> 00:00:20,883 So let's do that after these ones here. 8 8 00:00:22,010 --> 00:00:25,150 And remember that we actually handle keyboard events 9 9 00:00:25,150 --> 00:00:27,960 right at the document.addEventListener. 10 10 00:00:29,790 --> 00:00:31,690 And then we're gonna use the key down, 11 11 00:00:33,070 --> 00:00:35,530 event and so that's gonna be fired 12 12 00:00:35,530 --> 00:00:38,960 as soon as the key is pressed down. 13 13 00:00:38,960 --> 00:00:40,403 And here we need the event. 14 14 00:00:41,330 --> 00:00:45,690 And let's start by taking a look here at the event. 15 15 00:00:45,690 --> 00:00:47,010 So that we can figure out 16 16 00:00:48,430 --> 00:00:50,193 which keys we actually want to use. 17 17 00:00:51,430 --> 00:00:53,793 So I'm gonna hit the right arrow key. 18 18 00:00:55,000 --> 00:01:00,000 And so you see that we get the key here as ArrowRight. 19 19 00:01:00,840 --> 00:01:04,510 And then the other way around, it is of course ArrowLeft. 20 20 00:01:04,510 --> 00:01:07,873 And so I'm gonna use that key, ArrowLeft and ArrowRight. 21 21 00:01:11,750 --> 00:01:13,370 So, that's very simple. 22 22 00:01:13,370 --> 00:01:17,647 If e.key equals ArrowLeft, 23 23 00:01:20,820 --> 00:01:24,563 then what we want to do is to call the previous slide, 24 24 00:01:25,910 --> 00:01:27,890 function, right? 25 25 00:01:27,890 --> 00:01:30,330 And so this is also a reason why I created 26 26 00:01:30,330 --> 00:01:32,473 a separate function for this. 27 27 00:01:33,360 --> 00:01:37,410 Okay, so otherwise, I could also have left the entire code 28 28 00:01:37,410 --> 00:01:41,760 just here, instead of exporting it into its own function. 29 29 00:01:41,760 --> 00:01:43,420 I still prefer it like this, 30 30 00:01:43,420 --> 00:01:45,710 but it wouldn't have been necessary. 31 31 00:01:45,710 --> 00:01:48,770 But now as we need to reuse the same code here as well, 32 32 00:01:48,770 --> 00:01:52,583 then I really would have to create it, in its own function. 33 33 00:01:53,500 --> 00:01:55,190 Now you might have noticed that here 34 34 00:01:55,190 --> 00:01:58,420 we also could have used like, short circuiting 35 35 00:01:58,420 --> 00:02:03,420 so we could do e.key equal ArrowRight, 36 36 00:02:07,650 --> 00:02:10,700 and next slide. 37 37 00:02:10,700 --> 00:02:12,530 So this would work the same way 38 38 00:02:12,530 --> 00:02:14,343 because of short circuiting, right? 39 39 00:02:15,460 --> 00:02:16,623 At least I hope so. 40 40 00:02:17,870 --> 00:02:19,280 And yeah, it does. 41 41 00:02:19,280 --> 00:02:23,540 So I just hit the right key and here the left key 42 42 00:02:25,320 --> 00:02:27,670 and so it works just as fine. 43 43 00:02:27,670 --> 00:02:31,120 So you can now choose which version you like the most 44 44 00:02:31,120 --> 00:02:33,190 so I'm gonna leave both here, 45 45 00:02:33,190 --> 00:02:36,410 and let you decide which one you want to use. 46 46 00:02:36,410 --> 00:02:40,426 Now right, but now about the dots that I was talking about, 47 47 00:02:40,426 --> 00:02:43,490 let's go here to our HTML 48 48 00:02:44,590 --> 00:02:48,790 because, now here we actually already have a div 49 49 00:02:48,790 --> 00:02:50,700 so an element for that. 50 50 00:02:50,700 --> 00:02:53,440 So we have two buttons of course, these two 51 51 00:02:53,440 --> 00:02:56,030 and then we also have this empty container, 52 52 00:02:56,030 --> 00:02:58,460 in which we're gonna create the dots. 53 53 00:02:58,460 --> 00:03:00,790 So let's start by selecting that element 54 54 00:03:02,430 --> 00:03:05,387 and I'm gonna call it the dotContainer. 55 55 00:03:16,580 --> 00:03:18,810 So that's just dots, 56 56 00:03:18,810 --> 00:03:21,023 I think, yeah that's correct. 57 57 00:03:21,880 --> 00:03:26,333 And so let's start by creating all these dots in there. 58 58 00:03:28,020 --> 00:03:30,403 So I'm gonna create a new function here. 59 59 00:03:31,570 --> 00:03:35,260 So basically, nicely organizing the entire code 60 60 00:03:35,260 --> 00:03:38,350 of this slider here into different functions. 61 61 00:03:38,350 --> 00:03:41,773 And so that's a good pattern to get used to , alright? 62 62 00:03:43,480 --> 00:03:47,283 So just so you see what these dots will actually look like, 63 63 00:03:49,400 --> 00:03:52,180 so each dot is gonna be one element 64 64 00:03:52,180 --> 00:03:54,670 with the class of dots dot. 65 65 00:03:54,670 --> 00:03:57,810 And then it will have this data attribute of slide 66 66 00:03:57,810 --> 00:03:59,543 with the number of the slide 67 67 00:03:59,543 --> 00:04:03,330 that clicking the button will go to, alright? 68 68 00:04:03,330 --> 00:04:06,440 So one more time, the data attribute here holds some data 69 69 00:04:06,440 --> 00:04:09,683 that we need in order to make the functionality work. 70 70 00:04:10,580 --> 00:04:13,200 Let's actually grab this code here 71 71 00:04:13,200 --> 00:04:15,073 so I'm copying all of it now, 72 72 00:04:17,650 --> 00:04:22,010 and so what we want to do here now is to create one element 73 73 00:04:22,010 --> 00:04:24,640 like this for each of the slides. 74 74 00:04:24,640 --> 00:04:27,850 So the easiest way of doing that is to simply loop 75 75 00:04:27,850 --> 00:04:29,730 over the slides, 76 76 00:04:29,730 --> 00:04:33,370 because then we can do something for each of them. 77 77 00:04:33,370 --> 00:04:36,760 But in this case, it's not even gonna be about the slides 78 78 00:04:36,760 --> 00:04:39,180 it's just that we can do it four times, 79 79 00:04:39,180 --> 00:04:40,823 because we have four slides. 80 80 00:04:41,760 --> 00:04:45,007 So we have to slide again, and then the index, 81 81 00:04:45,007 --> 00:04:46,070 but in this case, 82 82 00:04:46,070 --> 00:04:49,393 we're really only gonna be interested in the index. 83 83 00:04:50,350 --> 00:04:52,758 So missing the function keyword here 84 84 00:04:52,758 --> 00:04:55,750 and actually since we're not interested in the slides, 85 85 00:04:55,750 --> 00:05:00,360 we can again use this convention of the throwaway variable. 86 86 00:05:00,360 --> 00:05:02,283 So a variable that we don't even need. 87 87 00:05:03,860 --> 00:05:08,860 And so let's now say dotContainer.insertAdjacentHTML. 88 88 00:05:09,880 --> 00:05:12,900 So as I mentioned, this is my favorite way 89 89 00:05:12,900 --> 00:05:14,923 of creating HTML elements. 90 90 00:05:15,868 --> 00:05:20,380 And so let's say beforeend so basically adding it 91 91 00:05:20,380 --> 00:05:22,470 as the last child always. 92 92 00:05:22,470 --> 00:05:26,450 And then here, we need the HTML code itself. 93 93 00:05:26,450 --> 00:05:28,910 And so let me just paste that button 94 94 00:05:28,910 --> 00:05:32,350 so that code that I copied from the demo site. 95 95 00:05:32,350 --> 00:05:36,763 And now here, all we need to do is to add the index. 96 96 00:05:38,320 --> 00:05:41,510 And so then the first button will get index zero, 97 97 00:05:41,510 --> 00:05:43,340 then two, three and four. 98 98 00:05:43,340 --> 00:05:46,270 So that in the next step we then can read this value 99 99 00:05:46,270 --> 00:05:50,210 from here, and move exactly to that slide 100 100 00:05:50,210 --> 00:05:52,233 once one of the dots is clicked. 101 101 00:05:55,070 --> 00:05:57,500 So let's check that out. 102 102 00:05:57,500 --> 00:06:00,513 Oh, and of course, we need to also call this function. 103 103 00:06:01,690 --> 00:06:04,870 So in the beginning, we need to call, goToSlide 104 104 00:06:04,870 --> 00:06:06,423 and also create dots. 105 105 00:06:08,270 --> 00:06:10,500 So create dots. 106 106 00:06:10,500 --> 00:06:14,410 And I will organize this a bit nicer by the end 107 107 00:06:14,410 --> 00:06:17,100 for now let's just leave it like this. 108 108 00:06:17,100 --> 00:06:20,183 Oh, and you see, we have the four dots now here. 109 109 00:06:21,142 --> 00:06:24,790 Now right, let's check them out here just to see 110 110 00:06:24,790 --> 00:06:26,860 the data slide attribute 111 111 00:06:26,860 --> 00:06:29,853 and indeed, zero, one, two and three. 112 112 00:06:30,910 --> 00:06:33,393 And now let's actually make them work. 113 113 00:06:34,330 --> 00:06:36,690 So adding another event handler here 114 114 00:06:37,630 --> 00:06:40,980 And I like to keep the event handlers or event listeners 115 115 00:06:40,980 --> 00:06:42,780 here at the bottom. 116 116 00:06:42,780 --> 00:06:47,000 And so of course, we are gonna use again, event delegation. 117 117 00:06:47,000 --> 00:06:50,700 So we're not gonna attach one event handler to each dot, 118 118 00:06:50,700 --> 00:06:52,990 but instead to the common parent. 119 119 00:06:52,990 --> 00:06:55,652 And so that is of course, the dotContainer, 120 120 00:06:55,652 --> 00:06:58,193 into which we just added the dots, 121 121 00:06:59,270 --> 00:07:01,140 so addEventListener, 122 122 00:07:02,060 --> 00:07:03,393 waiting for a click. 123 123 00:07:06,760 --> 00:07:08,950 And now to actually match the element 124 124 00:07:08,950 --> 00:07:10,573 that we're interested in, 125 125 00:07:10,573 --> 00:07:14,060 we can simply now check for the class. 126 126 00:07:14,060 --> 00:07:18,137 So that's event.target.classList.contains. 127 127 00:07:24,310 --> 00:07:26,010 And then the class of the dots 128 128 00:07:26,010 --> 00:07:29,577 is dots underscore, underscore dot. 129 129 00:07:34,520 --> 00:07:38,150 Alright, then if so let's just lock that to the console 130 130 00:07:38,150 --> 00:07:38,983 pretty quick. 131 131 00:07:43,470 --> 00:07:46,470 So here we get dot if we click outside somewhere 132 132 00:07:46,470 --> 00:07:47,960 nothing happens, 133 133 00:07:47,960 --> 00:07:49,923 and then again, dot and dot. 134 134 00:07:50,830 --> 00:07:53,883 Alright, so let's get the slide. 135 135 00:07:54,890 --> 00:07:59,890 So const slide is equal e.target.dataset.slide 136 136 00:08:04,987 --> 00:08:09,620 And so that's because it's called data slide. 137 137 00:08:09,620 --> 00:08:12,840 And so as always, all the custom data attributes 138 138 00:08:12,840 --> 00:08:16,380 are in the data set, and then dot this value. 139 139 00:08:16,380 --> 00:08:17,373 So .slide. 140 140 00:08:19,110 --> 00:08:22,710 So .slide and to make it even better, 141 141 00:08:22,710 --> 00:08:25,810 we can now use destructuring because this value 142 142 00:08:25,810 --> 00:08:28,200 is exactly the same as this. 143 143 00:08:28,200 --> 00:08:30,710 And so we're reading from this object 144 144 00:08:30,710 --> 00:08:32,273 and so we can simply do this. 145 145 00:08:33,510 --> 00:08:36,703 So another nice use case of destructuring right there. 146 146 00:08:37,890 --> 00:08:41,310 And so now, what we want to do is to basically go 147 147 00:08:41,310 --> 00:08:43,960 to the slide that we just selected. 148 148 00:08:43,960 --> 00:08:46,920 And so one more time, it's now very handy 149 149 00:08:46,920 --> 00:08:49,360 to have this goToSlide function here, 150 150 00:08:49,360 --> 00:08:52,173 inside its own separate function. 151 151 00:08:54,670 --> 00:08:55,943 So goToSlide 152 152 00:08:57,482 --> 00:09:00,350 and then with the slide number that we just read 153 153 00:09:00,350 --> 00:09:01,513 from the data set. 154 154 00:09:03,200 --> 00:09:04,290 So let's test that 155 155 00:09:05,730 --> 00:09:07,300 and it works. 156 156 00:09:07,300 --> 00:09:10,620 So slide two, let's see slide one 157 157 00:09:10,620 --> 00:09:12,653 let's go straight to the last one, 158 158 00:09:14,120 --> 00:09:16,090 and jumped over all the others 159 159 00:09:16,090 --> 00:09:18,500 and now we are at the last one. 160 160 00:09:18,500 --> 00:09:21,620 And of course we can combine this now with the buttons 161 161 00:09:21,620 --> 00:09:23,453 and with the keyboard arrows. 162 162 00:09:25,690 --> 00:09:30,690 And so yeah, great, this works as well. 163 163 00:09:30,810 --> 00:09:33,380 Now all we need to do is to also show 164 164 00:09:33,380 --> 00:09:36,150 which is the current slide. 165 165 00:09:36,150 --> 00:09:39,420 So activate this dot basically. 166 166 00:09:39,420 --> 00:09:42,320 So give it this different background color. 167 167 00:09:42,320 --> 00:09:46,330 So that's also pretty common in a slider like this 168 168 00:09:46,330 --> 00:09:49,570 and let me actually show it to you. 169 169 00:09:49,570 --> 00:09:53,460 So all we do as always, is to give it a special class. 170 170 00:09:53,460 --> 00:09:55,823 So the dots dot active class. 171 171 00:09:56,850 --> 00:10:00,930 So let's go back and let's do that not here, 172 172 00:10:00,930 --> 00:10:02,640 but in another function, 173 173 00:10:02,640 --> 00:10:06,000 because we need this functionality in many places. 174 174 00:10:06,000 --> 00:10:08,340 So whenever we change the slide, 175 175 00:10:08,340 --> 00:10:11,283 we will also need to change the indicator here. 176 176 00:10:12,530 --> 00:10:14,970 So no matter if we click on one of the dots, 177 177 00:10:14,970 --> 00:10:17,840 or if we just use these buttons here, 178 178 00:10:17,840 --> 00:10:19,310 whenever we changed the slide, 179 179 00:10:19,310 --> 00:10:23,860 we want to change which slide is currently the active one. 180 180 00:10:23,860 --> 00:10:26,780 And so we're gonna create a completely different function 181 181 00:10:26,780 --> 00:10:27,613 for that. 182 182 00:10:29,060 --> 00:10:30,910 And let's do it here after CreateDots 183 183 00:10:34,400 --> 00:10:36,820 so activateDot 184 184 00:10:39,240 --> 00:10:41,222 and here we need to again, 185 185 00:10:41,222 --> 00:10:44,763 then pass in the current slide, basically. 186 186 00:10:46,400 --> 00:10:47,893 So how will we do that? 187 187 00:10:48,750 --> 00:10:50,420 Well it's gonna be a bit similar 188 188 00:10:50,420 --> 00:10:52,870 to what we have here with these buttons. 189 189 00:10:52,870 --> 00:10:56,090 So here we also have like an active class to show 190 190 00:10:56,090 --> 00:10:59,170 which one is the active button here. 191 191 00:10:59,170 --> 00:11:03,610 And to do that, remember, before we activated one of them, 192 192 00:11:03,610 --> 00:11:05,933 we first dectivated all of them. 193 193 00:11:06,890 --> 00:11:08,853 And so here, we are gonna do the same. 194 194 00:11:10,350 --> 00:11:12,470 So we will select all of the dots, 195 195 00:11:12,470 --> 00:11:14,960 each time that we want to activate one. 196 196 00:11:14,960 --> 00:11:18,200 And we will then remove that active class, 197 197 00:11:18,200 --> 00:11:22,100 and then add it only on the one that we're interested in. 198 198 00:11:22,100 --> 00:11:24,313 So let's select all the dots. 199 199 00:11:25,650 --> 00:11:27,997 So that's document.querySelector 200 200 00:11:29,460 --> 00:11:30,893 and actually querySelectorAll, 201 201 00:11:31,980 --> 00:11:35,563 and so the dots are the one that have this class. 202 202 00:11:39,800 --> 00:11:41,100 And then for each of them, 203 203 00:11:43,882 --> 00:11:45,693 so let's call it dot, 204 204 00:11:48,220 --> 00:11:52,250 we want to say dot.classList.remove 205 205 00:11:54,180 --> 00:11:58,600 this class dash dash active. 206 206 00:11:58,600 --> 00:12:03,560 So that's the first step of removing all the active classes 207 207 00:12:03,560 --> 00:12:05,530 and then we will edit on the on the one 208 208 00:12:05,530 --> 00:12:06,873 that we are interested in. 209 209 00:12:07,970 --> 00:12:11,163 So how do we select the one that we actually want? 210 210 00:12:12,010 --> 00:12:16,630 Well, we can do that also based on the data attribute. 211 211 00:12:16,630 --> 00:12:18,900 So that's gonna be a bit too complicated. 212 212 00:12:18,900 --> 00:12:20,163 So let me show you how. 213 213 00:12:22,410 --> 00:12:24,880 So document.query.Selector 214 214 00:12:24,880 --> 00:12:26,090 and so here the query 215 215 00:12:26,090 --> 00:12:28,403 is gonna be a little bit more complicated. 216 216 00:12:29,270 --> 00:12:32,890 So it's still dots underscore, underscore dot 217 217 00:12:32,890 --> 00:12:36,433 but now we want to select based on the data slide attribute. 218 218 00:12:37,530 --> 00:12:41,050 So basically based on this attribute. 219 219 00:12:41,050 --> 00:12:43,203 And we can create a selector for that. 220 220 00:12:45,820 --> 00:12:48,920 So remember how previously we use these brackets 221 221 00:12:48,920 --> 00:12:52,000 to select four images with a certain attribute 222 222 00:12:52,000 --> 00:12:53,930 and so here we can do that as well, 223 223 00:12:53,930 --> 00:12:57,310 and even check if they have a certain value. 224 224 00:12:57,310 --> 00:13:01,057 So data slide equals, 225 225 00:13:01,057 --> 00:13:05,173 and so they should have exactly the value of slide. 226 226 00:13:06,476 --> 00:13:09,320 And so then, the selected dot 227 227 00:13:09,320 --> 00:13:14,150 we can add to the classList or class. 228 228 00:13:14,150 --> 00:13:15,323 So the active class, 229 229 00:13:17,780 --> 00:13:19,113 just like this. 230 230 00:13:20,330 --> 00:13:23,800 So let's say we pass in slide number two, 231 231 00:13:23,800 --> 00:13:26,340 so we want to activate the dot corresponding 232 232 00:13:26,340 --> 00:13:28,150 to slide number two. 233 233 00:13:28,150 --> 00:13:29,850 And so here in this querySelector, 234 234 00:13:30,780 --> 00:13:33,950 we can basically select the element with this class, 235 235 00:13:33,950 --> 00:13:38,950 and with this data slide attribute set to two. 236 236 00:13:39,250 --> 00:13:42,490 So right like this, okay, 237 237 00:13:42,490 --> 00:13:44,978 and here that's active. 238 238 00:13:44,978 --> 00:13:48,240 And so now, that should actually be working already. 239 239 00:13:48,240 --> 00:13:51,270 All we need to do is now call this function here 240 240 00:13:51,270 --> 00:13:53,083 in all the necessary places. 241 241 00:13:53,980 --> 00:13:56,230 So when we go to the next slide, 242 242 00:13:56,230 --> 00:13:58,250 we go to the slide of course, 243 243 00:13:58,250 --> 00:14:00,723 and then we also want to activate the dot. 244 244 00:14:02,630 --> 00:14:04,363 And also on the current slide, 245 245 00:14:05,507 --> 00:14:08,080 and then the same when we go to the previous slide 246 246 00:14:09,776 --> 00:14:14,440 activateDot with the current slide and finally, 247 247 00:14:14,440 --> 00:14:16,683 when we click on one of the dots. 248 248 00:14:17,940 --> 00:14:19,280 so activateDot 249 249 00:14:21,010 --> 00:14:22,613 and here it's just called slide. 250 250 00:14:25,001 --> 00:14:26,563 Okay, let's try that, 251 251 00:14:27,630 --> 00:14:30,550 and did it work or not? 252 252 00:14:30,550 --> 00:14:33,732 Well, it's hard to see, actually here 253 253 00:14:33,732 --> 00:14:36,140 because of these images, 254 254 00:14:36,140 --> 00:14:37,053 but, 255 255 00:14:38,150 --> 00:14:40,280 yeah apparently it is working. 256 256 00:14:40,280 --> 00:14:43,130 Although it looks kind of the same as all the other dots. 257 257 00:14:44,620 --> 00:14:48,690 So let's change that here to style, 258 258 00:14:48,690 --> 00:14:50,733 but it's very hard here. 259 259 00:14:52,070 --> 00:14:54,803 So let me change the the class here. 260 260 00:15:00,270 --> 00:15:02,393 So let's actually change it to white. 261 261 00:15:03,870 --> 00:15:05,713 So we activate this one here, 262 262 00:15:06,870 --> 00:15:09,990 now, and yeah, you can see that it actually works. 263 263 00:15:09,990 --> 00:15:11,993 So now that's a bit better visible. 264 264 00:15:14,840 --> 00:15:18,420 So that works just fine in all directions 265 265 00:15:18,420 --> 00:15:20,750 so even with the arrow of course, 266 266 00:15:20,750 --> 00:15:24,490 and when we click a dot, then the same works as well. 267 267 00:15:24,490 --> 00:15:28,360 There's just one problem which is when we reload this, 268 268 00:15:28,360 --> 00:15:30,483 then none of the slides is active. 269 269 00:15:31,800 --> 00:15:35,850 So let's go back here and also in the beginning call 270 270 00:15:35,850 --> 00:15:39,773 this activateDot function with slide zero. 271 271 00:15:41,170 --> 00:15:44,473 So activateDot zero. 272 272 00:15:46,480 --> 00:15:50,150 And so now you see the first dot is now active. 273 273 00:15:50,150 --> 00:15:55,150 Great, so that's actually it, our slider is working now. 274 274 00:15:55,486 --> 00:15:58,770 Let's just refactor our code just a little bit 275 275 00:15:58,770 --> 00:16:00,860 and make it a bit better. 276 276 00:16:00,860 --> 00:16:05,550 So for example, we have all of these function calls here. 277 277 00:16:05,550 --> 00:16:08,020 So let's put them all in the same function, 278 278 00:16:08,020 --> 00:16:09,560 which I'm gonna call init. 279 279 00:16:10,410 --> 00:16:14,750 So an init function an initialization function. 280 280 00:16:14,750 --> 00:16:16,703 So here we have our event handlers. 281 281 00:16:20,280 --> 00:16:23,120 And then here, our functions. 282 282 00:16:23,120 --> 00:16:26,163 So I'm calling the function that doesn't even exist yet. 283 283 00:16:27,290 --> 00:16:28,123 So, 284 284 00:16:30,890 --> 00:16:32,550 that's better. 285 285 00:16:32,550 --> 00:16:35,370 And now I will simply put all of these here, 286 286 00:16:35,370 --> 00:16:37,920 just so that we know a bit better what exactly 287 287 00:16:37,920 --> 00:16:41,530 we are gonna do in the beginning, basically, 288 288 00:16:41,530 --> 00:16:43,163 to initialize our slider. 289 289 00:16:45,290 --> 00:16:47,610 And there should be one more, 290 290 00:16:47,610 --> 00:16:49,860 Yeah that's to create the dots. 291 291 00:16:49,860 --> 00:16:53,870 And that should probably happen before we activate any dot. 292 292 00:16:53,870 --> 00:16:56,463 Otherwise that's not gonna work probably. 293 293 00:16:58,490 --> 00:17:01,400 So here we have them or functions. 294 294 00:17:01,400 --> 00:17:03,273 Let's just write that here as well. 295 295 00:17:05,470 --> 00:17:07,670 And this one we don't need any more in fact. 296 296 00:17:10,680 --> 00:17:12,180 And now just to finish, 297 297 00:17:12,180 --> 00:17:16,850 let's actually put all of this code into a function as well. 298 298 00:17:16,850 --> 00:17:20,483 And so this way, we do not pollute the global namespace. 299 299 00:17:21,530 --> 00:17:23,280 So that's something we like to say. 300 300 00:17:23,280 --> 00:17:26,340 And we're gonna talk a little bit more about this 301 301 00:17:26,340 --> 00:17:28,950 also later in the course, though. 302 302 00:17:28,950 --> 00:17:32,370 But for now just know that it is a good practice 303 303 00:17:32,370 --> 00:17:34,760 to keep this kind of functionality here, 304 304 00:17:34,760 --> 00:17:36,283 maybe in its own function. 305 305 00:17:40,810 --> 00:17:42,483 So let me, 306 306 00:17:43,970 --> 00:17:45,960 let me actually delete this one 307 307 00:17:45,960 --> 00:17:49,813 and just put one curly brace at the very end here. 308 308 00:17:50,750 --> 00:17:53,693 And then all we need to do is to call that function. 309 309 00:17:55,310 --> 00:17:56,243 And that's it. 310 310 00:17:57,530 --> 00:17:59,640 So now we have our slider working 311 311 00:17:59,640 --> 00:18:03,290 and we could now actually even passed in some values here, 312 312 00:18:03,290 --> 00:18:05,070 and to make this even more complete, 313 313 00:18:05,070 --> 00:18:09,000 we could actually pass in, like some options here. 314 314 00:18:09,000 --> 00:18:11,780 So we could make this slider function accept 315 315 00:18:11,780 --> 00:18:13,750 a couple of options. 316 316 00:18:13,750 --> 00:18:17,070 So an object, for example, which contains these options 317 317 00:18:17,070 --> 00:18:18,810 and then work with that. 318 318 00:18:18,810 --> 00:18:21,600 But that's a bit too much for this example. 319 319 00:18:21,600 --> 00:18:24,683 But just know that this is a pretty common thing to do. 320 320 00:18:26,100 --> 00:18:28,830 So great, this slider works 321 321 00:18:28,830 --> 00:18:33,830 let's just actually go back to deleting these slides, 322 322 00:18:33,910 --> 00:18:35,480 we don't need them anymore, 323 323 00:18:35,480 --> 00:18:38,300 and put back our original content. 324 324 00:18:38,300 --> 00:18:41,113 And so you will see then that it works just the same. 325 325 00:18:42,270 --> 00:18:44,333 And indeed it does. 326 326 00:18:45,570 --> 00:18:50,223 So I'm just gonna change the color of the dot back here, 327 327 00:18:52,400 --> 00:18:54,153 and then that's it. 328 328 00:18:56,220 --> 00:18:58,490 So everything works the same, 329 329 00:18:58,490 --> 00:19:00,950 no matter how many slides we have. 330 330 00:19:00,950 --> 00:19:03,482 So of course now we have only three dots, 331 331 00:19:03,482 --> 00:19:06,410 but everything just works the same. 332 332 00:19:06,410 --> 00:19:09,940 So the slider is really being built dynamically 333 333 00:19:09,940 --> 00:19:12,110 based on the number of slide elements 334 334 00:19:12,110 --> 00:19:13,873 that we create in our markup. 335 335 00:19:15,587 --> 00:19:20,370 Okay, so we're almost done with this project now 336 336 00:19:20,370 --> 00:19:22,720 there's just two more small lectures 337 337 00:19:22,720 --> 00:19:25,450 in which we're gonna learn a little bit more. 338 338 00:19:25,450 --> 00:19:27,290 And so after reviewing this code 339 339 00:19:27,290 --> 00:19:29,790 for this really cool component, 340 340 00:19:29,790 --> 00:19:33,333 let's then just quickly check out these final two lectures. 29265