Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
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.
22729
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.