1 00:00:00,210 --> 00:00:03,390 It's a little bit boring just to have a single testimonial, right? 2 00:00:03,390 --> 00:00:07,350 That seems like only one person ever used our app 3 00:00:07,380 --> 00:00:11,750 and actually liked it. So I'm sure there's more than one person who likes our product, 4 00:00:11,850 --> 00:00:13,130 right? 5 00:00:13,350 --> 00:00:19,530 So we're going to use something called the Bootstrap carousel, and this is kind of like a slideshow that allows 6 00:00:19,530 --> 00: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 7 00:00:25,410 --> 00: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 8 00:00:31,470 --> 00:00:34,300 you can toggle through all the different slides. 9 00:00:34,380 --> 00: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 10 00:00:41,010 --> 00:00:43,640 off how many people love our product. 11 00:00:43,650 --> 00:00:47,960 So let's first have a play around with it using our Code Ply. 12 00:00:48,180 --> 00: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 13 00:00:57,390 --> 00:00:58,220 playground. 14 00:00:58,410 --> 00:01:07,320 And of course remember to change your framework if you need to, and paste that code into the HTML section. 15 00:01:07,560 --> 00:01:08,960 So now let's hit run. 16 00:01:09,060 --> 00:01:10,200 Now it is working, 17 00:01:10,200 --> 00:01:13,390 but in this case there's no source for the images 18 00:01:13,440 --> 00:01:18,640 so they're not really showing up. Instead of looking for images and messing around with this, 19 00:01:18,690 --> 00:01:26,460 I'm simply going to select the carousel item which is the class that is the div that contains each slide 20 00:01:26,820 --> 00: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 21 00:01:34,170 --> 00:01:46,410 going to add an inline style. So style equals background-color red, and I'm going to add this inline 22 00:01:46,410 --> 00:01:52,070 style to all three slides. And the first one is going to be the red. 23 00:01:52,080 --> 00:01:53,790 Second one is going to be yellow. 24 00:01:53,970 --> 00:01:55,870 Third one is going to be blue. 25 00:01:56,110 --> 00:01:57,050 Hit run. 26 00:01:57,180 --> 00:02:01,020 And now let's pop it out to see what this looks like. 27 00:02:02,840 --> 00:02:05,980 So this is our first slide, which is red 28 00:02:06,020 --> 00:02:11,330 and it says first slide. Images are not working because we couldn't be bothered to find a valid image, 29 00:02:11,390 --> 00:02:15,370 but if we did put one in there then it would work just fine. 30 00:02:16,730 --> 00:02:23,210 And now, after what seems like forever, our second slide has just slid into view. 31 00:02:23,390 --> 00:02:25,600 This one's yellow. This one says second slide. 32 00:02:25,640 --> 00:02:31,510 And if we have the patience and do not fall asleep before the third one comes along, then, there we go, 33 00:02:31,520 --> 00:02:34,130 we’ve got a third slide as well. 34 00:02:34,160 --> 00:02:36,070 Now it's a little bit slow, isn't it? 35 00:02:36,140 --> 00: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, 36 00:02:42,080 --> 00:02:47,220 because it's kind of annoying, but how can you change the speed? 37 00:02:47,240 --> 00:02:56,510 Now, if we go into the Bootstrap documentation and we look at the usage options, which you can get to by 38 00:02:56,510 --> 00:02:57,960 clicking down here, 39 00:02:58,340 --> 00:03:02,180 then you can see that there's quite a few different options that we can actually change about these 40 00:03:02,180 --> 00:03:08,840 carousels. We can change, for example, the interval, which is the amount of time delay between cycling the 41 00:03:08,870 --> 00:03:10,030 items. 42 00:03:10,100 --> 00:03:14,010 Now the default is 5000 milliseconds. 43 00:03:14,070 --> 00:03:15,190 That's the unit here, 44 00:03:15,230 --> 00:03:21,860 even though it's not really said here. So 5000 milliseconds is basically five seconds. 45 00:03:21,860 --> 00:03:28,160 Now, if we wanted to speed it up, we can change that interval to, let's say, maybe every second. 46 00:03:28,190 --> 00: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 47 00:03:36,920 --> 00:03:40,760 the option name which is called interval to data-, 48 00:03:40,760 --> 00:03:43,410 so, for example, data-interval equals this. 49 00:03:43,580 --> 00: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 50 00:03:49,760 --> 00:03:56,750 to set it to equal to 1000 which is going to be 1000 milliseconds or basically cycling every second. 51 00:03:56,750 --> 00:03:58,150 So let's hit run. 52 00:03:58,280 --> 00:04:02,970 And now every second our carousel is changing its slide. 53 00:04:02,990 --> 00:04:07,640 Now before I blind you there's a whole bunch of other options that you can change. 54 00:04:07,640 --> 00:04:12,310 For example, should the carousel react to keyboard values? 55 00:04:12,320 --> 00:04:14,370 So for example going left and right. 56 00:04:14,450 --> 00:04:21,220 Should it be paused when the cursor is hovering over the carousel? 57 00:04:21,320 --> 00:04:25,070 So let's go ahead and see what some of those things might look like. 58 00:04:25,070 --> 00:04:29,500 So let's for example add the one where we can pause on hover. 59 00:04:29,540 --> 00:04:38,020 So let's add the attribute called data-pause and it's going to equal to hover. 60 00:04:38,030 --> 00:04:43,130 Now if we hit run our slides will continue going at the speed of light. 61 00:04:43,250 --> 00:04:49,920 But once I put my cursor inside it then it will pause which is quite a nice feature. 62 00:04:50,150 --> 00:04:56,030 And some web sites are too lazy to implement this, which is really frustrating when I want to read what's 63 00:04:56,030 --> 00:04:58,820 on that particular slide in the carousel. 64 00:04:58,820 --> 00:05:01,880 Now, another thing that we can change is the slide class here. 65 00:05:01,880 --> 00:05:09,090 So if we removed that from the carousel class then you can see that it no longer slides but just changes 66 00:05:09,090 --> 00:05:10,630 to the next carousel item. 67 00:05:10,820 --> 00:05:15,800 But I quite like this sliding animation, so I'm going to put it back in. 68 00:05:16,130 --> 00:05:20,370 And the final one I’ll show you is how do you stop this auto play. 69 00:05:20,630 --> 00:05:21,750 Well, you can change 70 00:05:21,800 --> 00:05:22,610 ride. 71 00:05:22,640 --> 00: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 72 00:05:30,710 --> 00:05:38,600 will only play if you tell it to through maybe the keyboard buttons or through some carrousel button. 73 00:05:38,600 --> 00:05:40,590 So it's not auto playing anymore. 74 00:05:40,640 --> 00:05:46,290 So how do we change the slides? How do we go from slide one to slide two? 75 00:05:46,700 --> 00:05:52,170 Well, if we have a look in the docs, there's another type of carrousel which has controls, 76 00:05:52,310 --> 00:05:57,060 so it has these buttons that lets us go between the different slides. 77 00:05:57,070 --> 00:06:00,770 And that's what I want to implement for our TinDog web site. 78 00:06:00,770 --> 00:06:03,630 So how can we do this? 79 00:06:03,650 --> 00:06:08,050 So I want to have a static carousel that doesn't auto play. 80 00:06:08,060 --> 00:06:10,830 So I'm going to leave data-ride equals false. 81 00:06:10,880 --> 00:06:17,720 Now, I don't need a data-interval anymore, because that only applies to the animation of auto scrolling 82 00:06:17,720 --> 00:06:21,560 between the different slides. And data-pause on hover 83 00:06:21,560 --> 00:06:25,100 I also don't need because it's stopped by default. 84 00:06:25,100 --> 00:06:33,290 So now if we look inside this example which has the controls then you can see that the difference between 85 00:06:33,290 --> 00: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 86 00:06:42,050 --> 00:06:45,890 control previous and a carousel control next. 87 00:06:46,040 --> 00:06:50,780 So let's go ahead and copy these two buttons over to our Code Ply. 88 00:06:51,140 --> 00:06:54,900 And you can see down here they've put it just above the last div. 89 00:06:54,920 --> 00:06:57,920 So we're going to do exactly the same. 90 00:06:57,920 --> 00:07:00,220 So now if we hit run and we pop it out, 91 00:07:00,230 --> 00:07:04,930 you’ll see that we now have buttons but they don't work yet. 92 00:07:04,940 --> 00:07:12,080 Now the reason is because, as with all of these Bootstrap buttons they, have a href that targets 93 00:07:12,410 --> 00:07:18,470 the carousel and it needs to be the same name as the id of your carousel. 94 00:07:18,470 --> 00:07:25,150 So, for example, in this case the id is carouselExampleSlidesOnly, but this href is targeting something 95 00:07:25,160 --> 00:07:27,540 called carouselExampleControls, 96 00:07:27,650 --> 00:07:32,760 and that's because in the second example the id was called carouselExampleControls. 97 00:07:32,810 --> 00:07:34,700 So let's change this. 98 00:07:34,700 --> 00:07:45,020 Let's make it target something like just called testimonial-carousel, and we can make that the same 99 00:07:45,040 --> 00:07:51,710 href for the previous as well as the next buttons. 100 00:07:51,710 --> 00:07:56,450 And of course we need to change the actual id of the carousel over here. 101 00:07:56,660 --> 00:08:03,940 So now whenever each of these buttons are pressed they target the carousel that we've got in place and 102 00:08:03,940 --> 00: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 103 00:08:10,970 --> 00:08:14,750 and it works both for the next and the previous buttons. 104 00:08:14,750 --> 00: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 105 00:08:22,010 --> 00:08:22,610 about. 106 00:08:22,880 --> 00:08:27,340 So the first thing is a div that has the id of the carousel. 107 00:08:27,380 --> 00:08:31,430 And this of course, remember, needs to be unique across your page. 108 00:08:31,430 --> 00:08:37,490 Next we add some custom Bootstrap classes, which is carousel, which says that this div is going to be 109 00:08:37,490 --> 00:08:44,270 a carousel, and slide, which, if you remember from earlier on, says that our slides should animate in from 110 00:08:44,270 --> 00:08:51,260 the right or left rather than simply just appearing. Data-ride equals false means that it doesn't auto 111 00:08:51,260 --> 00:08:51,670 play. 112 00:08:51,710 --> 00:08:54,220 So we've got that line sorted. 113 00:08:54,320 --> 00:08:56,240 Next we've got the carousel-inner, 114 00:08:56,300 --> 00:09:01,340 and this is going to contain the contents of the carousel items, 115 00:09:01,370 --> 00:09:05,220 so the slides that will be changed. Inside carousel-inner 116 00:09:05,240 --> 00: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, 117 00:09:12,260 --> 00: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 118 00:09:18,670 --> 00:09:23,880 one of these carousel items being marked as the active class. 119 00:09:24,120 --> 00:09:29,940 Now the next thing is some inline style that we put in just to be able to distinguish the three slides 120 00:09:30,030 --> 00:09:30,970 from each other. 121 00:09:31,080 --> 00: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 122 00:09:37,000 --> 00:09:38,130 h1, 123 00:09:38,260 --> 00:09:40,020 it doesn't really matter, 124 00:09:40,020 --> 00:09:42,090 it doesn't change anything about the carousel. 125 00:09:42,090 --> 00:09:48,450 And in fact later on we're going to be putting our custom testimonials inside here as the carousel item 126 00:09:48,570 --> 00:09:54,130 content. So we can ignore these images, like here and here. 127 00:09:54,360 --> 00:09:56,640 Then we get to our two buttons. 128 00:09:56,700 --> 00:10:04,350 So the first button has the class carousel-control-prev, that is this left button over here, and it 129 00:10:04,360 --> 00:10:10,480 has an href to know which carousel to target, because you can have multiple carousels in your HTML, 130 00:10:10,480 --> 00:10:11,460 all right, 131 00:10:11,460 --> 00:10:16,710 so it needs to know which one it should affect. Then the role of it is the button. 132 00:10:16,710 --> 00: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 133 00:10:22,830 --> 00:10:23,850 have to be. 134 00:10:23,880 --> 00:10:29,670 It could be something like an h1 that you might want to assign the role of button to, right? 135 00:10:29,670 --> 00:10:34,510 So this is what it's all about. You have to add this role equals button to change our anchor 136 00:10:34,600 --> 00:10:37,070 tag into a button. 137 00:10:37,170 --> 00:10:39,600 Next is data-slide previous. 138 00:10:39,600 --> 00:10:43,850 So this says which direction should your carousel slide. 139 00:10:43,860 --> 00:10:49,360 So this is going backwards and this one is going forwards. And the next line is a span. 140 00:10:49,440 --> 00:10:51,440 And this is the button icons, 141 00:10:51,460 --> 00:10:53,260 this little arrow over here. 142 00:10:53,400 --> 00:10:55,010 And this comes from Bootstrap 143 00:10:55,020 --> 00:10:59,750 by adding in that class. And aria-hidden equals true. 144 00:10:59,760 --> 00: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. 145 00:11:04,230 --> 00:11:11,250 But aria-hidden basically means that when a visually impaired person comes across your web site, they 146 00:11:11,250 --> 00:11:17,930 usually have something called a screen reader which goes through the web site and reads what is on there 147 00:11:18,000 --> 00:11:20,180 so they can hear what we can see. 148 00:11:20,310 --> 00:11:26,150 Now for things like buttons you don't really want the screen reader to read out left button, right button, 149 00:11:26,170 --> 00:11:28,300 or, you know, previous button, next button. 150 00:11:28,440 --> 00:11:33,810 So you have this thing called aria-hidden, which basically means, make the screen reader skip over this 151 00:11:33,820 --> 00:11:39,810 button span so that the visually impaired person doesn't have to listen to what all the buttons are. 152 00:11:40,170 --> 00:11:46,940 And this goes towards, you know, making your web site more accessible and friendly to people with disabilities. 153 00:11:47,220 --> 00:11:52,010 And this is actually a really really big topic and really really important topic as well. 154 00:11:52,110 --> 00:11:54,720 So you can either keep it in or you can delete it. 155 00:11:54,720 --> 00:11:58,540 But just remember about your users who might be visually impaired. 156 00:11:58,540 --> 00:12:04,890 Now the last band that we see in here is called sr-only, and this stands for screen reader only. 157 00:12:04,920 --> 00:12:06,660 And that is what we said before, 158 00:12:06,660 --> 00:12:07,240 right? 159 00:12:07,260 --> 00:12:13,980 So instead of telling the user that there is a carousel control previous icon button, instead it just 160 00:12:13,980 --> 00:12:16,840 says 'previous' on the screen reader. 161 00:12:16,980 --> 00:12:24,600 So you can either delete this if you're not planning on being accessible to people who have visual impairments 162 00:12:24,780 --> 00:12:28,460 or you can include it and make sure that your web site is more inclusive. 163 00:12:28,500 --> 00: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 164 00:12:32,370 --> 00:12:35,450 keep the code as clean and pure as possible. 165 00:12:35,640 --> 00: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 166 00:12:43,380 --> 00:12:44,070 site. 167 00:12:44,100 --> 00: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 168 00:12:48,960 --> 00:12:53,190 when it starts interacting with everything else and it could lead to issues. 169 00:12:53,190 --> 00:12:57,280 So I want to have a pure version that's just working exactly as I need it to, 170 00:12:57,510 --> 00:13:00,140 and then I can transplant it into the web site. 171 00:13:00,240 --> 00:13:02,850 So let's go ahead and copy all of this 172 00:13:02,930 --> 00: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 173 00:13:09,420 --> 00:13:13,420 going to place it inside the testimonial section of course. 174 00:13:13,440 --> 00:13:19,450 So now you might notice that there is this section that has been commented out. 175 00:13:19,470 --> 00:13:26,040 So if you select it and you hold down command on Mac or control on Windows, then you press the forward 176 00:13:26,040 --> 00:13:32,740 slash button, then it will uncomment it and take it back into the flow of our web site. 177 00:13:32,790 --> 00:13:39,070 So we now have two testimonials, so we can change our code to have two carousel items. 178 00:13:39,090 --> 00: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 179 00:13:44,580 --> 00:13:45,550 of Hello, 180 00:13:45,720 --> 00:13:52,350 but instead it's going to have this first testimonial with Pebbles that we saw earlier on. 181 00:13:52,500 --> 00:13:56,770 And the second one is going to be from Beverly from Illinois. 182 00:13:56,970 --> 00:13:59,190 I feel like I'm on a game show. 183 00:13:59,190 --> 00:14:04,110 Beverly from Illinois you have just won not very much. 184 00:14:04,110 --> 00:14:09,000 So now that we've updated that let's just check to make sure that everything else is in order. 185 00:14:09,000 --> 00:14:15,180 And one thing that we've transplanted over that we don't really want or need are these inline styles 186 00:14:15,360 --> 00:14:21,450 so we can get rid of our inline styles that changes the background color because we have a beautiful 187 00:14:21,450 --> 00: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. 188 00:14:29,900 --> 00:14:31,700 And if I go left 189 00:14:31,750 --> 00:14:32,890 or right, 190 00:14:33,040 --> 00:14:37,980 then you can see that it's scrolling through the two different testimonials I've got. 191 00:14:37,990 --> 00:14:41,650 And obviously, if you have more, then you can keep adding them in, 192 00:14:41,650 --> 00:14:42,640 right? 193 00:14:42,760 --> 00:14:48,730 And the nice thing is that all the styles that I added previously, because I've got all the classes in 194 00:14:48,730 --> 00:14:55,120 place, in the second testimonial I didn't have to add or change any styling at all. 195 00:14:55,120 --> 00: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 196 00:15:02,730 --> 00:15:10,210 really like these buttons to be further out out here, so that they're not so close to my testimonial text, 197 00:15:10,240 --> 00:15:13,070 because it looks a little bit weird to my eye. 198 00:15:13,300 --> 00:15:20,980 Now, the reason why that's happening is because our padding is applied to the testimonial section. 199 00:15:20,980 --> 00:15:27,310 So this entire section is the testimonial section and, if you have a look on Chrome Developer Tools, then 200 00:15:27,310 --> 00:15:32,260 you can see that it has quite a lot of padding around all four sides. 201 00:15:32,260 --> 00:15:35,890 And that is squishing in these buttons here. 202 00:15:36,070 --> 00:15:43,300 So in order to change that we can apply the padding to only the parts that we want to be padded. 203 00:15:43,300 --> 00:15:51,610 So what we can do instead is we can apply that padding to each carousel item, so that the content inside 204 00:15:51,610 --> 00:15:58,250 the carousel items are padded, so the h2, the image and the em, they're all bunched in the center, 205 00:15:58,510 --> 00:16:05,560 but to have the buttons outside of that padding, so that it has more space and it's more visible and 206 00:16:05,560 --> 00:16:07,060 more easy to click on. 207 00:16:07,090 --> 00: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 208 00:16:16,630 --> 00:16:23,010 the testimonial section which is section wide to only inside the carousel item. 209 00:16:23,020 --> 00:16:30,810 So now if we hit save and refresh then you can see our buttons are now all the way out here. 210 00:16:31,030 --> 00:16:36,960 And, if you take a look at Pesticide, you can see that the buttons are now occupying a much larger space 211 00:16:37,180 --> 00:16:39,280 and it's hard to miss. 212 00:16:39,280 --> 00:16:46,670 So if you click anywhere in the section it will scroll through the testimonials. But our padding for our 213 00:16:46,700 --> 00:16:53,180 carousel items are still in place and it still looks exactly the way that it did before, 214 00:16:53,320 --> 00:16:57,040 just we now have more logically placed buttons. 215 00:16:57,190 --> 00:17:02,920 So, I hope you enjoyed this section of learning about the Bootstrap carousel, and it might be worth for you to 216 00:17:02,920 --> 00:17:08,120 have a play around with some of the other examples that they've shown inside your Code Ply playground. 217 00:17:08,200 --> 00:17:13,450 But in the next lesson we're going to learn about another Bootstrap component which is really really 218 00:17:13,450 --> 00:17:14,070 useful, 219 00:17:14,120 --> 00:17:16,210 and that's the Bootstrap cards. 220 00:17:16,480 --> 00:17:19,750 So for all of that and more, I'll see you on the next lesson.