0
1
00:00:00,210 --> 00:00:03,390
It's a little bit boring just to have a single testimonial, right?
1

2
00:00:03,390 --> 00:00:07,350
That seems like only one person ever used our app
2

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, 
3

4
00:00:11,850 --> 00:00:13,130
right?
4

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
5

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
6

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
7

8
00:00:31,470 --> 00:00:34,300
you can toggle through all the different slides.
8

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
9

10
00:00:41,010 --> 00:00:43,640
off how many people love our product.
10

11
00:00:43,650 --> 00:00:47,960
So let's first have a play around with it using our Code Ply.
11

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 
12

13
00:00:57,390 --> 00:00:58,220
playground.
13

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

15
00:01:07,560 --> 00:01:08,960
So now let's hit run.
15

16
00:01:09,060 --> 00:01:10,200
Now it is working,
16

17
00:01:10,200 --> 00:01:13,390
but in this case there's no source for the images
17

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,
18

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
19

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
20

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
21

22
00:01:46,410 --> 00:01:52,070
style to all three slides. And the first one is going to be the red.
22

23
00:01:52,080 --> 00:01:53,790
Second one is going to be yellow.
23

24
00:01:53,970 --> 00:01:55,870
Third one is going to be blue.
24

25
00:01:56,110 --> 00:01:57,050
Hit run.
25

26
00:01:57,180 --> 00:02:01,020
And now let's pop it out to see what this looks like.
26

27
00:02:02,840 --> 00:02:05,980
So this is our first slide, which is red
27

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,
28

29
00:02:11,390 --> 00:02:15,370
but if we did put one in there then it would work just fine.
29

30
00:02:16,730 --> 00:02:23,210
And now, after what seems like forever, our second slide has just slid into view.
30

31
00:02:23,390 --> 00:02:25,600
This one's yellow. This one says second slide.
31

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,
32

33
00:02:31,520 --> 00:02:34,130
we’ve got a third slide as well.
33

34
00:02:34,160 --> 00:02:36,070
Now it's a little bit slow, isn't it?
34

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,
35

36
00:02:42,080 --> 00:02:47,220
because it's kind of annoying, but how can you change the speed?
36

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
37

38
00:02:56,510 --> 00:02:57,960
clicking down here,
38

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
39

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
40

41
00:03:08,870 --> 00:03:10,030
items.
41

42
00:03:10,100 --> 00:03:14,010
Now the default is 5000 milliseconds.
42

43
00:03:14,070 --> 00:03:15,190
That's the unit here,
43

44
00:03:15,230 --> 00:03:21,860
even though it's not really said here. So 5000 milliseconds is basically five seconds.
44

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

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
46

47
00:03:36,920 --> 00:03:40,760
the option name which is called interval to data-,
47

48
00:03:40,760 --> 00:03:43,410
so, for example, data-interval equals this.
48

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
49

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

51
00:03:56,750 --> 00:03:58,150
So let's hit run.
51

52
00:03:58,280 --> 00:04:02,970
And now every second our carousel is changing its slide.
52

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

54
00:04:07,640 --> 00:04:12,310
For example, should the carousel react to keyboard values?
54

55
00:04:12,320 --> 00:04:14,370
So for example going left and right.
55

56
00:04:14,450 --> 00:04:21,220
Should it be paused when the cursor is hovering over the carousel?
56

57
00:04:21,320 --> 00:04:25,070
So let's go ahead and see what some of those things might look like.
57

58
00:04:25,070 --> 00:04:29,500
So let's for example add the one where we can pause on hover.
58

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

60
00:04:38,030 --> 00:04:43,130
Now if we hit run our slides will continue going at the speed of light.
60

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

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
62

63
00:04:56,030 --> 00:04:58,820
on that particular slide in the carousel.
63

64
00:04:58,820 --> 00:05:01,880
Now, another thing that we can change is the slide class here.
64

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
65

66
00:05:09,090 --> 00:05:10,630
to the next carousel item.
66

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

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

69
00:05:20,630 --> 00:05:21,750
Well, you can change
69

70
00:05:21,800 --> 00:05:22,610
ride.
70

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
71

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

73
00:05:38,600 --> 00:05:40,590
So it's not auto playing anymore.
73

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?
74

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,
75

76
00:05:52,310 --> 00:05:57,060
so it has these buttons that lets us go between the different slides.
76

77
00:05:57,070 --> 00:06:00,770
And that's what I want to implement for our TinDog web site.
77

78
00:06:00,770 --> 00:06:03,630
So how can we do this?
78

79
00:06:03,650 --> 00:06:08,050
So I want to have a static carousel that doesn't auto play.
79

80
00:06:08,060 --> 00:06:10,830
So I'm going to leave data-ride equals false.
80

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
81

82
00:06:17,720 --> 00:06:21,560
between the different slides. And data-pause on hover
82

83
00:06:21,560 --> 00:06:25,100
I also don't need because it's stopped by default.
83

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
84

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
85

86
00:06:42,050 --> 00:06:45,890
control previous and a carousel control next.
86

87
00:06:46,040 --> 00:06:50,780
So let's go ahead and copy these two buttons over to our Code Ply.
87

88
00:06:51,140 --> 00:06:54,900
And you can see down here they've put it just above the last div.
88

89
00:06:54,920 --> 00:06:57,920
So we're going to do exactly the same.
89

90
00:06:57,920 --> 00:07:00,220
So now if we hit run and we pop it out,
90

91
00:07:00,230 --> 00:07:04,930
you’ll see that we now have buttons but they don't work yet.
91

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
92

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

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
94

95
00:07:25,160 --> 00:07:27,540
called carouselExampleControls,
95

96
00:07:27,650 --> 00:07:32,760
and that's because in the second example the id was called carouselExampleControls.
96

97
00:07:32,810 --> 00:07:34,700
So let's change this.
97

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
98

99
00:07:45,040 --> 00:07:51,710
href for the previous as well as the next buttons.
99

100
00:07:51,710 --> 00:07:56,450
And of course we need to change the actual id of the carousel over here.
100

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
101

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
102

103
00:08:10,970 --> 00:08:14,750
and it works both for the next and the previous buttons.
103

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
104

105
00:08:22,010 --> 00:08:22,610
about.
105

106
00:08:22,880 --> 00:08:27,340
So the first thing is a div that has the id of the carousel.
106

107
00:08:27,380 --> 00:08:31,430
And this of course, remember, needs to be unique across your page.
107

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
108

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
109

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
110

111
00:08:51,260 --> 00:08:51,670
play.
111

112
00:08:51,710 --> 00:08:54,220
So we've got that line sorted.
112

113
00:08:54,320 --> 00:08:56,240
Next we've got the carousel-inner,
113

114
00:08:56,300 --> 00:09:01,340
and this is going to contain the contents of the carousel items,
114

115
00:09:01,370 --> 00:09:05,220
so the slides that will be changed. Inside carousel-inner
115

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,
116

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
117

118
00:09:18,670 --> 00:09:23,880
one of these carousel items being marked as the active class.
118

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
119

120
00:09:30,030 --> 00:09:30,970
from each other.
120

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
121

122
00:09:37,000 --> 00:09:38,130
h1,
122

123
00:09:38,260 --> 00:09:40,020
it doesn't really matter,
123

124
00:09:40,020 --> 00:09:42,090
it doesn't change anything about the carousel.
124

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
125

126
00:09:48,570 --> 00:09:54,130
content. So we can ignore these images, like here and here.
126

127
00:09:54,360 --> 00:09:56,640
Then we get to our two buttons.
127

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
128

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,
129

130
00:10:10,480 --> 00:10:11,460
all right,
130

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

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
132

133
00:10:22,830 --> 00:10:23,850
have to be.
133

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?
134

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
135

136
00:10:34,600 --> 00:10:37,070
tag into a button.
136

137
00:10:37,170 --> 00:10:39,600
Next is data-slide previous.
137

138
00:10:39,600 --> 00:10:43,850
So this says which direction should your carousel slide.
138

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

140
00:10:49,440 --> 00:10:51,440
And this is the button icons,
140

141
00:10:51,460 --> 00:10:53,260
this little arrow over here.
141

142
00:10:53,400 --> 00:10:55,010
And this comes from Bootstrap
142

143
00:10:55,020 --> 00:10:59,750
by adding in that class. And aria-hidden equals true.
143

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

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
145

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
146

147
00:11:18,000 --> 00:11:20,180
so they can hear what we can see.
147

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,
148

149
00:11:26,170 --> 00:11:28,300
or, you know, previous button, next button.
149

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
150

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

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

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

154
00:11:52,110 --> 00:11:54,720
So you can either keep it in or you can delete it.
154

155
00:11:54,720 --> 00:11:58,540
But just remember about your users who might be visually impaired.
155

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

157
00:12:04,920 --> 00:12:06,660
And that is what we said before,
157

158
00:12:06,660 --> 00:12:07,240
right?
158

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
159

160
00:12:13,980 --> 00:12:16,840
says 'previous' on the screen reader.
160

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
161

162
00:12:24,780 --> 00:12:28,460
or you can include it and make sure that your web site is more inclusive.
162

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
163

164
00:12:32,370 --> 00:12:35,450
keep the code as clean and pure as possible.
164

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
165

166
00:12:43,380 --> 00:12:44,070
site.
166

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
167

168
00:12:48,960 --> 00:12:53,190
when it starts interacting with everything else and it could lead to issues.
168

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,
169

170
00:12:57,510 --> 00:13:00,140
and then I can transplant it into the web site.
170

171
00:13:00,240 --> 00:13:02,850
So let's go ahead and copy all of this
171

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
172

173
00:13:09,420 --> 00:13:13,420
going to place it inside the testimonial section of course.
173

174
00:13:13,440 --> 00:13:19,450
So now you might notice that there is this section that has been commented out.
174

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
175

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

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

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
178

179
00:13:44,580 --> 00:13:45,550
of Hello,
179

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

181
00:13:52,500 --> 00:13:56,770
And the second one is going to be from Beverly from Illinois.
181

182
00:13:56,970 --> 00:13:59,190
I feel like I'm on a game show.
182

183
00:13:59,190 --> 00:14:04,110
Beverly from Illinois you have just won not very much.
183

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

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
185

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
186

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

188
00:14:29,900 --> 00:14:31,700
And if I go left
188

189
00:14:31,750 --> 00:14:32,890
or right,
189

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

191
00:14:37,990 --> 00:14:41,650
And obviously, if you have more, then you can keep adding them in,
191

192
00:14:41,650 --> 00:14:42,640
right?
192

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
193

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

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
195

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,
196

197
00:15:10,240 --> 00:15:13,070
because it looks a little bit weird to my eye.
197

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

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
199

200
00:15:27,310 --> 00:15:32,260
you can see that it has quite a lot of padding around all four sides.
200

201
00:15:32,260 --> 00:15:35,890
And that is squishing in these buttons here.
201

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

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
203

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,
204

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
205

206
00:16:05,560 --> 00:16:07,060
more easy to click on.
206

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
207

208
00:16:16,630 --> 00:16:23,010
the testimonial section which is section wide to only inside the carousel item.
208

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

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
210

211
00:16:37,180 --> 00:16:39,280
and it's hard to miss.
211

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
212

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,
213

214
00:16:53,320 --> 00:16:57,040
just we now have more logically placed buttons.
214

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
215

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

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
217

218
00:17:13,450 --> 00:17:14,070
useful,
218

219
00:17:14,120 --> 00:17:16,210
and that's the Bootstrap cards.
219

220
00:17:16,480 --> 00:17:19,750
So for all of that and more, I'll see you on the next lesson.