1
00:00:03,650 --> 00:00:09,125
We just learnt about the carousel component in the previous lecture.

2
00:00:09,125 --> 00:00:14,324
In this exercise, we're going to add in a carousel to our index.html

3
00:00:14,324 --> 00:00:20,760
page and in the process learn how the carousel component works.

4
00:00:20,760 --> 00:00:24,090
Going to index.html page,

5
00:00:24,090 --> 00:00:29,640
we'll add in a new row into the content div,

6
00:00:29,640 --> 00:00:31,730
as the first row in the div.

7
00:00:31,730 --> 00:00:33,595
So I'll go in and say,

8
00:00:33,595 --> 00:00:43,535
give div class row row-content and inside this div,

9
00:00:43,535 --> 00:00:47,545
we're going to create the carousel component.

10
00:00:47,545 --> 00:00:56,925
And in what's div I will add in the inner column div,

11
00:00:56,925 --> 00:01:02,045
which will contain the carousel component here.

12
00:01:02,045 --> 00:01:04,135
To add in the carousel,

13
00:01:04,135 --> 00:01:13,630
here I will add in the div with the ID my carousel and

14
00:01:13,630 --> 00:01:17,440
a class carousel and

15
00:01:17,440 --> 00:01:24,170
slide and the data ride class.

16
00:01:24,170 --> 00:01:33,110
So you can see the JavaScript component coming into action here,

17
00:01:33,110 --> 00:01:42,420
and then close off the div and start building out the carousel inside this div here.

18
00:01:42,420 --> 00:01:44,995
So, into this carousel,

19
00:01:44,995 --> 00:01:49,580
we'll add in the content of the carousel next.

20
00:01:49,580 --> 00:01:54,700
So I'll go in and then add another div with the class

21
00:01:56,740 --> 00:02:07,815
carousel-inner and the role as list box.

22
00:02:07,815 --> 00:02:15,380
This is the way we build up the carousel and then close that div there.

23
00:02:15,380 --> 00:02:22,955
And inside this div again we'll introduce divs that will host

24
00:02:22,955 --> 00:02:32,855
the items of the carousel by applying the carousel item class.

25
00:02:32,855 --> 00:02:37,120
And the first one in the carousel item...

26
00:02:37,240 --> 00:02:41,080
The first one in the carousel class,

27
00:02:41,080 --> 00:02:42,595
I will apply the active class.

28
00:02:42,595 --> 00:02:48,235
So this is the first div which starts out containing

29
00:02:48,235 --> 00:02:56,650
the starting slide there and the remaining ones, I'm going to add in.

30
00:02:56,650 --> 00:03:09,680
Let me add in two more carousel-item divs

31
00:03:09,680 --> 00:03:16,630
here and apply only the first one with the active class.

32
00:03:16,630 --> 00:03:21,445
Now I'm going to introduce in the content into this carousel items.

33
00:03:21,445 --> 00:03:25,165
So to construct a carousel item,

34
00:03:25,165 --> 00:03:33,770
I will go in there and then include an image with the class d-block.

35
00:03:33,770 --> 00:03:35,655
So this is used for,

36
00:03:35,655 --> 00:03:43,930
this is a flex class that allows our image to be properly positioned and then add in

37
00:03:43,930 --> 00:03:53,240
the image fluid class and then the source as img.

38
00:03:58,220 --> 00:04:03,595
So what I will do is to move in that content from

39
00:04:03,595 --> 00:04:09,020
the three content rows below and then add it into the carousel here.

40
00:04:15,470 --> 00:04:21,710
So I add in an image here and then to the carousel,

41
00:04:21,710 --> 00:04:23,340
I can also add in

42
00:04:23,340 --> 00:04:28,200
a div with

43
00:04:28,200 --> 00:04:34,030
the class carousel caption.

44
00:04:34,030 --> 00:04:38,780
In here we can include some text that will be over relayed as a caption onto the image.

45
00:04:38,780 --> 00:04:48,450
So I'll say carousel caption d-none, d-md-block.

46
00:04:48,740 --> 00:04:52,555
And then inside here,

47
00:04:52,555 --> 00:04:59,490
I will include the content from the content rows here.

48
00:04:59,490 --> 00:05:04,600
So I will go in and copy the content from the content rows

49
00:05:04,600 --> 00:05:14,330
here and then paste that into the carousel caption block here.

50
00:05:25,320 --> 00:05:32,315
And I'll remove the class that we applied to the H2 from this content.

51
00:05:32,315 --> 00:05:35,850
Now, we'll repeat the same thing for the remaining two by copying

52
00:05:35,850 --> 00:05:40,820
the content from the content rows below in here.

53
00:05:40,820 --> 00:05:43,645
So, let me complete that and then we'll come back and

54
00:05:43,645 --> 00:05:47,225
take a look at how the carousel looks like.

55
00:05:47,225 --> 00:05:49,940
Here you can see that I have completed

56
00:05:49,940 --> 00:05:56,440
the remaining carousel items here by copying the content from the content rows below.

57
00:05:56,440 --> 00:06:04,190
Let's add in a few CSS classes so that the carousel is nicely structured.

58
00:06:04,190 --> 00:06:10,235
So going to styles.css file at the bottom here,

59
00:06:10,235 --> 00:06:17,410
I'm going to add in a couple of more classes here.

60
00:06:17,410 --> 00:06:19,710
For the carousel class,

61
00:06:19,710 --> 00:06:25,310
I would add the background as 512DA8,

62
00:06:25,310 --> 00:06:30,280
which we have used before the dark colored class.

63
00:06:30,280 --> 00:06:39,825
And then for the carousel-item class,

64
00:06:39,825 --> 00:06:47,400
I'm going to add in a height as 300 pixel.

65
00:06:48,030 --> 00:06:59,195
And for the image that is included inside the carousel item,

66
00:06:59,195 --> 00:07:03,480
I'm going to apply a few transformations here.

67
00:07:03,480 --> 00:07:10,830
I would say, position absolute.

68
00:07:10,830 --> 00:07:14,360
I want to position it to the left.

69
00:07:19,470 --> 00:07:29,290
So this top and left zero will position this image to the top left edge of

70
00:07:29,290 --> 00:07:33,700
the carousel box there and with

71
00:07:33,700 --> 00:07:41,050
a minimum height set to 300 pixel to match the carousel-items height.

72
00:07:41,050 --> 00:07:45,680
So this image will essentially stretch the entire height of

73
00:07:45,680 --> 00:07:51,020
the carousel but will be positioned to the left edge of the carousel box here.

74
00:07:51,020 --> 00:07:52,820
So let me save the changes.

75
00:07:52,820 --> 00:07:58,235
We'll just go and have a look at what this carousel looks like on our web page.

76
00:07:58,235 --> 00:07:59,770
Going to the web page,

77
00:07:59,770 --> 00:08:05,460
you can now see that carousel in action on our index study table page.

78
00:08:05,460 --> 00:08:09,000
So you can see that the carousel is

79
00:08:09,000 --> 00:08:13,905
positioned at the top here and then we'll keep scrolling at regular intervals.

80
00:08:13,905 --> 00:08:16,470
Note how by using the CSS classes,

81
00:08:16,470 --> 00:08:21,925
I have styled the background from the carousel such that the captions are

82
00:08:21,925 --> 00:08:24,745
clearly visible in the carousel

83
00:08:24,745 --> 00:08:28,305
and also how the image has been positioned on the carousel.

84
00:08:28,305 --> 00:08:33,865
The height of this carousel slide is fixed at 300 pixel.

85
00:08:33,865 --> 00:08:37,750
So, this gives a nice clean layout for this carousel.

86
00:08:37,750 --> 00:08:42,855
Now, let's add in a few controls for this carousel.

87
00:08:42,855 --> 00:08:46,155
Going back to index.html.

88
00:08:46,155 --> 00:08:56,015
Right after the carousel in our box here but still inside the carousel,

89
00:08:56,015 --> 00:09:05,170
I'm going to add in an OL to introduce a few manual controls for the carousel.

90
00:09:05,170 --> 00:09:10,490
And with the class carousel-indicators.

91
00:09:12,400 --> 00:09:16,570
These indicators will be positioned on

92
00:09:16,570 --> 00:09:24,095
the carousel slides to indicate which particular slide is currently being shown.

93
00:09:24,095 --> 00:09:28,760
So let me introduce in the content here so I say OL,

94
00:09:28,760 --> 00:09:30,630
I use the OL for this.

95
00:09:30,630 --> 00:09:34,175
And then, inside there I use the list with

96
00:09:34,175 --> 00:09:42,175
the data-target set to my carousel.

97
00:09:42,175 --> 00:09:49,460
So this is the ID of the carousel and data-slide-to.

98
00:09:49,460 --> 00:09:55,880
And the first indicators will slide to slide number zero.

99
00:09:56,870 --> 00:10:08,080
With that class as active for the first item in this list,

100
00:10:08,460 --> 00:10:18,870
then the remaining two items I'm going to simply use list with the data-target

101
00:10:18,870 --> 00:10:24,510
set equal to my carousel

102
00:10:24,510 --> 00:10:30,310
and the data-slide-to is set to one.

103
00:10:30,310 --> 00:10:33,150
So, this is for the second slide there.

104
00:10:33,150 --> 00:10:38,755
I'm just going to copy this one and then create the third indicator indicator in here.

105
00:10:38,755 --> 00:10:47,740
So we'll go in and copy this and then change this to data-slide-to two.

106
00:10:47,740 --> 00:10:54,685
So we have free slides in our carousel so three indicators are sufficient enough.

107
00:10:54,685 --> 00:10:58,540
Now, we'll also add in a couple of controls to

108
00:10:58,540 --> 00:11:02,435
this carousel which allows us to manually scroll the carousel.

109
00:11:02,435 --> 00:11:06,580
To do that, I will introduce an A with

110
00:11:06,580 --> 00:11:13,705
the class carousel-control-prev here.

111
00:11:13,705 --> 00:11:17,065
So this would allow me to go to the previous slide,

112
00:11:17,065 --> 00:11:22,710
make the href equal to mycarousel,

113
00:11:22,710 --> 00:11:30,220
so you can see that we are trying to target the carousel there and the role is a button.

114
00:11:30,220 --> 00:11:38,730
So this is going to act as a button and data-slide as previous.

115
00:11:38,730 --> 00:11:41,620
So within this A,

116
00:11:44,530 --> 00:11:52,635
I will introduce a icon

117
00:11:52,635 --> 00:11:55,810
to represent this control on the screen.

118
00:11:55,810 --> 00:12:01,310
So, I'll say, span class carousel-control-prev-icon

119
00:12:01,960 --> 00:12:12,560
and close off the span here.

120
00:12:12,560 --> 00:12:18,210
I will now copy this control.

121
00:12:19,890 --> 00:12:28,950
And paste it here and then create the control for the next slide here so I would say,

122
00:12:28,950 --> 00:12:34,440
carousel-control-next and roll is a button and the data slide used to

123
00:12:34,440 --> 00:12:41,315
next and the icon would be carousel-control-next icon.

124
00:12:41,315 --> 00:12:45,275
So adding these into my carousel,

125
00:12:45,275 --> 00:12:49,595
let's go and take a look at our carousel at this moment.

126
00:12:49,595 --> 00:12:51,395
Going to the carousel,

127
00:12:51,395 --> 00:12:57,325
you can now see that in my carousel I have three indicator buttons here,

128
00:12:57,325 --> 00:13:02,830
which indicate which particular slide is

129
00:13:02,830 --> 00:13:08,085
currently visible in my carousel and as the slides slide,

130
00:13:08,085 --> 00:13:11,380
then the indicator also correspondingly changes to

131
00:13:11,380 --> 00:13:15,150
indicate which particular slide is visible.

132
00:13:15,150 --> 00:13:21,810
I can manually click on one of them and go to the specific slide in the carousel.

133
00:13:21,810 --> 00:13:26,320
Not only that, you can see that there are now two indicators,

134
00:13:26,320 --> 00:13:27,980
the left and right,

135
00:13:27,980 --> 00:13:32,120
which I can use to again scroll through the carousel by

136
00:13:32,120 --> 00:13:36,715
clicking on these indicators here.

137
00:13:36,715 --> 00:13:38,490
So using these controls,

138
00:13:38,490 --> 00:13:43,660
both the previous and the next control and the the indicators here,

139
00:13:43,660 --> 00:13:51,155
I can navigate to the specific slide in my carousel.

140
00:13:51,155 --> 00:13:53,635
This completes this exercise.

141
00:13:53,635 --> 00:13:59,350
This is a good time for you to do a git-commit with the message carousel.