WEBVTT 0 00:00.210 --> 00:03.390 It's a little bit boring just to have a single testimonial, right? 1 00:03.390 --> 00:07.350 That seems like only one person ever used our app 2 00:07.380 --> 00:11.750 and actually liked it. So I'm sure there's more than one person who likes our product, 3 00:11.850 --> 00:13.130 right? 4 00:13.350 --> 00:19.530 So we're going to use something called the Bootstrap carousel, and this is kind of like a slideshow that allows 5 00:19.530 --> 00:25.410 you to go through different content. And you've got the ones where it's kind of automated, like you’ve got 6 00:25.410 --> 00:31.470 over here, but you've got another one which is more manual, which is the one that we're going to use, where 7 00:31.470 --> 00:34.300 you can toggle through all the different slides. 8 00:34.380 --> 00:41.010 And in our case each slide is just going to be a new testimonial from a new person so that we can show 9 00:41.010 --> 00:43.640 off how many people love our product. 10 00:43.650 --> 00:47.960 So let's first have a play around with it using our Code Ply. 11 00:48.180 --> 00:57.390 So if you go to the first example where there’s slides only, and copy the code here into a new Code Ply 12 00:57.390 --> 00:58.220 playground. 13 00:58.410 --> 01:07.320 And of course remember to change your framework if you need to, and paste that code into the HTML section. 14 01:07.560 --> 01:08.960 So now let's hit run. 15 01:09.060 --> 01:10.200 Now it is working, 16 01:10.200 --> 01:13.390 but in this case there's no source for the images 17 01:13.440 --> 01:18.640 so they're not really showing up. Instead of looking for images and messing around with this, 18 01:18.690 --> 01:26.460 I'm simply going to select the carousel item which is the class that is the div that contains each slide 19 01:26.820 --> 01:34.170 and I'm simply going to give it a height of, say, 500 pixels, and I'm going to go into the div and I'm 20 01:34.170 --> 01:46.410 going to add an inline style. So style equals background-color red, and I'm going to add this inline 21 01:46.410 --> 01:52.070 style to all three slides. And the first one is going to be the red. 22 01:52.080 --> 01:53.790 Second one is going to be yellow. 23 01:53.970 --> 01:55.870 Third one is going to be blue. 24 01:56.110 --> 01:57.050 Hit run. 25 01:57.180 --> 02:01.020 And now let's pop it out to see what this looks like. 26 02:02.840 --> 02:05.980 So this is our first slide, which is red 27 02:06.020 --> 02:11.330 and it says first slide. Images are not working because we couldn't be bothered to find a valid image, 28 02:11.390 --> 02:15.370 but if we did put one in there then it would work just fine. 29 02:16.730 --> 02:23.210 And now, after what seems like forever, our second slide has just slid into view. 30 02:23.390 --> 02:25.600 This one's yellow. This one says second slide. 31 02:25.640 --> 02:31.510 And if we have the patience and do not fall asleep before the third one comes along, then, there we go, 32 02:31.520 --> 02:34.130 we’ve got a third slide as well. 33 02:34.160 --> 02:36.070 Now it's a little bit slow, isn't it? 34 02:36.140 --> 02:42.050 And, you know, if you're on an actual web site, it's probably not a great idea to have very fast carousels, 35 02:42.080 --> 02:47.220 because it's kind of annoying, but how can you change the speed? 36 02:47.240 --> 02:56.510 Now, if we go into the Bootstrap documentation and we look at the usage options, which you can get to by 37 02:56.510 --> 02:57.960 clicking down here, 38 02:58.340 --> 03:02.180 then you can see that there's quite a few different options that we can actually change about these 39 03:02.180 --> 03:08.840 carousels. We can change, for example, the interval, which is the amount of time delay between cycling the 40 03:08.870 --> 03:10.030 items. 41 03:10.100 --> 03:14.010 Now the default is 5000 milliseconds. 42 03:14.070 --> 03:15.190 That's the unit here, 43 03:15.230 --> 03:21.860 even though it's not really said here. So 5000 milliseconds is basically five seconds. 44 03:21.860 --> 03:28.160 Now, if we wanted to speed it up, we can change that interval to, let's say, maybe every second. 45 03:28.190 --> 03:36.860 So, if we go into the div that is our carousel, which is here, and, as it says here, you have to append 46 03:36.920 --> 03:40.760 the option name which is called interval to data-, 47 03:40.760 --> 03:43.410 so, for example, data-interval equals this. 48 03:43.580 --> 03:49.760 So we're going to go in here and we're going to add that attribute data-interval, and we're going 49 03:49.760 --> 03:56.750 to set it to equal to 1000 which is going to be 1000 milliseconds or basically cycling every second. 50 03:56.750 --> 03:58.150 So let's hit run. 51 03:58.280 --> 04:02.970 And now every second our carousel is changing its slide. 52 04:02.990 --> 04:07.640 Now before I blind you there's a whole bunch of other options that you can change. 53 04:07.640 --> 04:12.310 For example, should the carousel react to keyboard values? 54 04:12.320 --> 04:14.370 So for example going left and right. 55 04:14.450 --> 04:21.220 Should it be paused when the cursor is hovering over the carousel? 56 04:21.320 --> 04:25.070 So let's go ahead and see what some of those things might look like. 57 04:25.070 --> 04:29.500 So let's for example add the one where we can pause on hover. 58 04:29.540 --> 04:38.020 So let's add the attribute called data-pause and it's going to equal to hover. 59 04:38.030 --> 04:43.130 Now if we hit run our slides will continue going at the speed of light. 60 04:43.250 --> 04:49.920 But once I put my cursor inside it then it will pause which is quite a nice feature. 61 04:50.150 --> 04:56.030 And some web sites are too lazy to implement this, which is really frustrating when I want to read what's 62 04:56.030 --> 04:58.820 on that particular slide in the carousel. 63 04:58.820 --> 05:01.880 Now, another thing that we can change is the slide class here. 64 05:01.880 --> 05:09.090 So if we removed that from the carousel class then you can see that it no longer slides but just changes 65 05:09.090 --> 05:10.630 to the next carousel item. 66 05:10.820 --> 05:15.800 But I quite like this sliding animation, so I'm going to put it back in. 67 05:16.130 --> 05:20.370 And the final one I’ll show you is how do you stop this auto play. 68 05:20.630 --> 05:21.750 Well, you can change 69 05:21.800 --> 05:22.610 ride. 70 05:22.640 --> 05:30.710 So, data-ride over here, if it's equal to carrousel, will just auto play. If it's set to false, then it 71 05:30.710 --> 05:38.600 will only play if you tell it to through maybe the keyboard buttons or through some carrousel button. 72 05:38.600 --> 05:40.590 So it's not auto playing anymore. 73 05:40.640 --> 05:46.290 So how do we change the slides? How do we go from slide one to slide two? 74 05:46.700 --> 05:52.170 Well, if we have a look in the docs, there's another type of carrousel which has controls, 75 05:52.310 --> 05:57.060 so it has these buttons that lets us go between the different slides. 76 05:57.070 --> 06:00.770 And that's what I want to implement for our TinDog web site. 77 06:00.770 --> 06:03.630 So how can we do this? 78 06:03.650 --> 06:08.050 So I want to have a static carousel that doesn't auto play. 79 06:08.060 --> 06:10.830 So I'm going to leave data-ride equals false. 80 06:10.880 --> 06:17.720 Now, I don't need a data-interval anymore, because that only applies to the animation of auto scrolling 81 06:17.720 --> 06:21.560 between the different slides. And data-pause on hover 82 06:21.560 --> 06:25.100 I also don't need because it's stopped by default. 83 06:25.100 --> 06:33.290 So now if we look inside this example which has the controls then you can see that the difference between 84 06:33.290 --> 06:42.050 this one and the previous one that didn't have controls is that it has some buttons down here. It has a carousel 85 06:42.050 --> 06:45.890 control previous and a carousel control next. 86 06:46.040 --> 06:50.780 So let's go ahead and copy these two buttons over to our Code Ply. 87 06:51.140 --> 06:54.900 And you can see down here they've put it just above the last div. 88 06:54.920 --> 06:57.920 So we're going to do exactly the same. 89 06:57.920 --> 07:00.220 So now if we hit run and we pop it out, 90 07:00.230 --> 07:04.930 you’ll see that we now have buttons but they don't work yet. 91 07:04.940 --> 07:12.080 Now the reason is because, as with all of these Bootstrap buttons they, have a href that targets 92 07:12.410 --> 07:18.470 the carousel and it needs to be the same name as the id of your carousel. 93 07:18.470 --> 07:25.150 So, for example, in this case the id is carouselExampleSlidesOnly, but this href is targeting something 94 07:25.160 --> 07:27.540 called carouselExampleControls, 95 07:27.650 --> 07:32.760 and that's because in the second example the id was called carouselExampleControls. 96 07:32.810 --> 07:34.700 So let's change this. 97 07:34.700 --> 07:45.020 Let's make it target something like just called testimonial-carousel, and we can make that the same 98 07:45.040 --> 07:51.710 href for the previous as well as the next buttons. 99 07:51.710 --> 07:56.450 And of course we need to change the actual id of the carousel over here. 100 07:56.660 --> 08:03.940 So now whenever each of these buttons are pressed they target the carousel that we've got in place and 101 08:03.940 --> 08:10.760 now if I run our code you can see that when I press on the buttons it actually changes through the slides 102 08:10.970 --> 08:14.750 and it works both for the next and the previous buttons. 103 08:14.750 --> 08:22.010 Now let's go through each and every line of this code just so that we understand fully what it's all 104 08:22.010 --> 08:22.610 about. 105 08:22.880 --> 08:27.340 So the first thing is a div that has the id of the carousel. 106 08:27.380 --> 08:31.430 And this of course, remember, needs to be unique across your page. 107 08:31.430 --> 08:37.490 Next we add some custom Bootstrap classes, which is carousel, which says that this div is going to be 108 08:37.490 --> 08:44.270 a carousel, and slide, which, if you remember from earlier on, says that our slides should animate in from 109 08:44.270 --> 08:51.260 the right or left rather than simply just appearing. Data-ride equals false means that it doesn't auto 110 08:51.260 --> 08:51.670 play. 111 08:51.710 --> 08:54.220 So we've got that line sorted. 112 08:54.320 --> 08:56.240 Next we've got the carousel-inner, 113 08:56.300 --> 09:01.340 and this is going to contain the contents of the carousel items, 114 09:01.370 --> 09:05.220 so the slides that will be changed. Inside carousel-inner 115 09:05.240 --> 09:12.250 we’ve got three carousel items. And the first one, the first page that you want to show on your web site, 116 09:12.260 --> 09:18.650 so when you load up your web site, the first slide is marked with an active class, and you have to have 117 09:18.670 --> 09:23.880 one of these carousel items being marked as the active class. 118 09:24.120 --> 09:29.940 Now the next thing is some inline style that we put in just to be able to distinguish the three slides 119 09:30.030 --> 09:30.970 from each other. 120 09:31.080 --> 09:36.950 And then inside each of these we’ve got some content. So you can have an image, or you can have, say, an 121 09:37.000 --> 09:38.130 h1, 122 09:38.260 --> 09:40.020 it doesn't really matter, 123 09:40.020 --> 09:42.090 it doesn't change anything about the carousel. 124 09:42.090 --> 09:48.450 And in fact later on we're going to be putting our custom testimonials inside here as the carousel item 125 09:48.570 --> 09:54.130 content. So we can ignore these images, like here and here. 126 09:54.360 --> 09:56.640 Then we get to our two buttons. 127 09:56.700 --> 10:04.350 So the first button has the class carousel-control-prev, that is this left button over here, and it 128 10:04.360 --> 10:10.480 has an href to know which carousel to target, because you can have multiple carousels in your HTML, 129 10:10.480 --> 10:11.460 all right, 130 10:11.460 --> 10:16.710 so it needs to know which one it should affect. Then the role of it is the button. 131 10:16.710 --> 10:22.830 Now, ideally, you want to use an anchor tag as the HTML element that's going to be the button, but it doesn't 132 10:22.830 --> 10:23.850 have to be. 133 10:23.880 --> 10:29.670 It could be something like an h1 that you might want to assign the role of button to, right? 134 10:29.670 --> 10:34.510 So this is what it's all about. You have to add this role equals button to change our anchor 135 10:34.600 --> 10:37.070 tag into a button. 136 10:37.170 --> 10:39.600 Next is data-slide previous. 137 10:39.600 --> 10:43.850 So this says which direction should your carousel slide. 138 10:43.860 --> 10:49.360 So this is going backwards and this one is going forwards. And the next line is a span. 139 10:49.440 --> 10:51.440 And this is the button icons, 140 10:51.460 --> 10:53.260 this little arrow over here. 141 10:53.400 --> 10:55.010 And this comes from Bootstrap 142 10:55.020 --> 10:59.750 by adding in that class. And aria-hidden equals true. 143 10:59.760 --> 11:03.960 Now this is something that we saw in the nav bar as well and we didn't really talk about it too much. 144 11:04.230 --> 11:11.250 But aria-hidden basically means that when a visually impaired person comes across your web site, they 145 11:11.250 --> 11:17.930 usually have something called a screen reader which goes through the web site and reads what is on there 146 11:18.000 --> 11:20.180 so they can hear what we can see. 147 11:20.310 --> 11:26.150 Now for things like buttons you don't really want the screen reader to read out left button, right button, 148 11:26.170 --> 11:28.300 or, you know, previous button, next button. 149 11:28.440 --> 11:33.810 So you have this thing called aria-hidden, which basically means, make the screen reader skip over this 150 11:33.820 --> 11:39.810 button span so that the visually impaired person doesn't have to listen to what all the buttons are. 151 11:40.170 --> 11:46.940 And this goes towards, you know, making your web site more accessible and friendly to people with disabilities. 152 11:47.220 --> 11:52.010 And this is actually a really really big topic and really really important topic as well. 153 11:52.110 --> 11:54.720 So you can either keep it in or you can delete it. 154 11:54.720 --> 11:58.540 But just remember about your users who might be visually impaired. 155 11:58.540 --> 12:04.890 Now the last band that we see in here is called sr-only, and this stands for screen reader only. 156 12:04.920 --> 12:06.660 And that is what we said before, 157 12:06.660 --> 12:07.240 right? 158 12:07.260 --> 12:13.980 So instead of telling the user that there is a carousel control previous icon button, instead it just 159 12:13.980 --> 12:16.840 says 'previous' on the screen reader. 160 12:16.980 --> 12:24.600 So you can either delete this if you're not planning on being accessible to people who have visual impairments 161 12:24.780 --> 12:28.460 or you can include it and make sure that your web site is more inclusive. 162 12:28.500 --> 12:32.370 Now in our case I'm actually going to get rid of it just because we're learning something new and I want to 163 12:32.370 --> 12:35.450 keep the code as clean and pure as possible. 164 12:35.640 --> 12:43.380 So now this is what we've got as our carousel, and this is what we would like to implement in our web 165 12:43.380 --> 12:44.070 site. 166 12:44.100 --> 12:48.950 So I'd like to test out the code in something like Code Ply before I put it into the web site 167 12:48.960 --> 12:53.190 when it starts interacting with everything else and it could lead to issues. 168 12:53.190 --> 12:57.280 So I want to have a pure version that's just working exactly as I need it to, 169 12:57.510 --> 13:00.140 and then I can transplant it into the web site. 170 13:00.240 --> 13:02.850 So let's go ahead and copy all of this 171 13:02.930 --> 13:09.420 HTML over here, and we're going to put it into our index.html for our TinDog web site. And I'm 172 13:09.420 --> 13:13.420 going to place it inside the testimonial section of course. 173 13:13.440 --> 13:19.450 So now you might notice that there is this section that has been commented out. 174 13:19.470 --> 13:26.040 So if you select it and you hold down command on Mac or control on Windows, then you press the forward 175 13:26.040 --> 13:32.740 slash button, then it will uncomment it and take it back into the flow of our web site. 176 13:32.790 --> 13:39.070 So we now have two testimonials, so we can change our code to have two carousel items. 177 13:39.090 --> 13:44.580 So I'm going to delete the third one basically. And the first one is no longer going to have the h1 178 13:44.580 --> 13:45.550 of Hello, 179 13:45.720 --> 13:52.350 but instead it's going to have this first testimonial with Pebbles that we saw earlier on. 180 13:52.500 --> 13:56.770 And the second one is going to be from Beverly from Illinois. 181 13:56.970 --> 13:59.190 I feel like I'm on a game show. 182 13:59.190 --> 14:04.110 Beverly from Illinois you have just won not very much. 183 14:04.110 --> 14:09.000 So now that we've updated that let's just check to make sure that everything else is in order. 184 14:09.000 --> 14:15.180 And one thing that we've transplanted over that we don't really want or need are these inline styles 185 14:15.360 --> 14:21.450 so we can get rid of our inline styles that changes the background color because we have a beautiful 186 14:21.450 --> 14:29.650 background color already. So let's hit save and let's hit refresh and you can see we now have a testimonial. 187 14:29.900 --> 14:31.700 And if I go left 188 14:31.750 --> 14:32.890 or right, 189 14:33.040 --> 14:37.980 then you can see that it's scrolling through the two different testimonials I've got. 190 14:37.990 --> 14:41.650 And obviously, if you have more, then you can keep adding them in, 191 14:41.650 --> 14:42.640 right? 192 14:42.760 --> 14:48.730 And the nice thing is that all the styles that I added previously, because I've got all the classes in 193 14:48.730 --> 14:55.120 place, in the second testimonial I didn't have to add or change any styling at all. 194 14:55.120 --> 15:02.730 Now there's just one last eyesore that I want to fix before we finish off this section, and that is, I'd 195 15:02.730 --> 15:10.210 really like these buttons to be further out out here, so that they're not so close to my testimonial text, 196 15:10.240 --> 15:13.070 because it looks a little bit weird to my eye. 197 15:13.300 --> 15:20.980 Now, the reason why that's happening is because our padding is applied to the testimonial section. 198 15:20.980 --> 15:27.310 So this entire section is the testimonial section and, if you have a look on Chrome Developer Tools, then 199 15:27.310 --> 15:32.260 you can see that it has quite a lot of padding around all four sides. 200 15:32.260 --> 15:35.890 And that is squishing in these buttons here. 201 15:36.070 --> 15:43.300 So in order to change that we can apply the padding to only the parts that we want to be padded. 202 15:43.300 --> 15:51.610 So what we can do instead is we can apply that padding to each carousel item, so that the content inside 203 15:51.610 --> 15:58.250 the carousel items are padded, so the h2, the image and the em, they're all bunched in the center, 204 15:58.510 --> 16:05.560 but to have the buttons outside of that padding, so that it has more space and it's more visible and 205 16:05.560 --> 16:07.060 more easy to click on. 206 16:07.090 --> 16:16.630 So to do that all we need to do is to target the carousel item and we're going to move the padding from 207 16:16.630 --> 16:23.010 the testimonial section which is section wide to only inside the carousel item. 208 16:23.020 --> 16:30.810 So now if we hit save and refresh then you can see our buttons are now all the way out here. 209 16:31.030 --> 16:36.960 And, if you take a look at Pesticide, you can see that the buttons are now occupying a much larger space 210 16:37.180 --> 16:39.280 and it's hard to miss. 211 16:39.280 --> 16:46.670 So if you click anywhere in the section it will scroll through the testimonials. But our padding for our 212 16:46.700 --> 16:53.180 carousel items are still in place and it still looks exactly the way that it did before, 213 16:53.320 --> 16:57.040 just we now have more logically placed buttons. 214 16:57.190 --> 17:02.920 So, I hope you enjoyed this section of learning about the Bootstrap carousel, and it might be worth for you to 215 17:02.920 --> 17:08.120 have a play around with some of the other examples that they've shown inside your Code Ply playground. 216 17:08.200 --> 17:13.450 But in the next lesson we're going to learn about another Bootstrap component which is really really 217 17:13.450 --> 17:14.070 useful, 218 17:14.120 --> 17:16.210 and that's the Bootstrap cards. 219 17:16.480 --> 17:19.750 So for all of that and more, I'll see you on the next lesson.