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