Original subtitles

0 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.