1
00:00:04,150 --> 00:00:06,880
Hello everyone and welcome back to our bootstrap course.

2
00:00:06,940 --> 00:00:09,910
In this lecture we're going to be building a carousel for our Web site.

3
00:00:09,910 --> 00:00:13,260
Now in the previous lecture we left off with our fixed now bar.

4
00:00:13,270 --> 00:00:18,590
As you can see I'm scrolling with the nav bar is still there and we also built the NAV here.

5
00:00:18,590 --> 00:00:21,880
This main section of our site is the head or the NAV.

6
00:00:22,570 --> 00:00:27,820
And as you know as we scroll down and we're going to be seeing this white background here which we don't

7
00:00:27,820 --> 00:00:28,150
want.

8
00:00:28,210 --> 00:00:29,480
Let's go ahead and fix that right now.

9
00:00:29,500 --> 00:00:35,920
Just open up to each terminal tab here and why this is occurring is because we assigned a full page

10
00:00:36,490 --> 00:00:41,120
class to our NAV here.

11
00:00:41,170 --> 00:00:43,990
Full page means we set it to be 100 V H.

12
00:00:44,020 --> 00:00:46,330
So one hundred of the viewport height.

13
00:00:46,330 --> 00:00:53,380
And typically whenever you work with the viewport height Number one it's not supported with all browsers.

14
00:00:53,380 --> 00:01:00,870
And number two it has some responsibility issues like as you can see depending on the viewport height

15
00:01:00,970 --> 00:01:05,650
if the browser calculates the viewport height incorrectly then you can have these issues.

16
00:01:05,650 --> 00:01:09,900
So we typically want to only use if you put height when we need to.

17
00:01:10,150 --> 00:01:17,320
Percentages are better and we are going to be using viewport height for setting the height of elements

18
00:01:17,350 --> 00:01:19,850
that would otherwise be small on default.

19
00:01:20,080 --> 00:01:23,330
But this block itself it won't be small on defaults.

20
00:01:23,350 --> 00:01:25,860
So we can actually just remove the full page class.

21
00:01:25,860 --> 00:01:28,120
And as you can see that will remove this issue here.

22
00:01:28,130 --> 00:01:33,010
I'm going to close the issue tab that will remove the white spacing down there.

23
00:01:33,010 --> 00:01:37,770
And now we are seeing the whole section here.

24
00:01:37,780 --> 00:01:43,690
So those look great as you can see we quickly built up our Web site so far with this button and with

25
00:01:43,720 --> 00:01:46,420
automatic bootstrap styling we built it quite quickly.

26
00:01:46,420 --> 00:01:52,450
So let's open the HMO tab again and start working on the next element we have here now close the output

27
00:01:52,450 --> 00:01:53,240
for now.

28
00:01:53,440 --> 00:01:59,530
We just finished up that section of services overview and now we're going to work on the featured products

29
00:01:59,530 --> 00:02:00,870
carousel.

30
00:02:00,910 --> 00:02:05,600
So as you can imagine this is going to be the carousel.

31
00:02:05,680 --> 00:02:08,610
So let's go ahead and start building that out.

32
00:02:08,770 --> 00:02:16,820
Now this carousel is going to show different services and products depending on the company.

33
00:02:16,870 --> 00:02:19,270
So we have an idea future products carousel.

34
00:02:19,270 --> 00:02:23,670
Let's also give it a class using a bootstrap class.

35
00:02:23,710 --> 00:02:28,250
So using carousel will make the bootstrap class of Carousel.

36
00:02:28,540 --> 00:02:35,590
And you can put in a slide so that the bootstrap class will be also of type slide so the carousel will

37
00:02:35,590 --> 00:02:37,650
be a slide carousel.

38
00:02:37,660 --> 00:02:43,920
We also have to add data ride feature which is going to be carousel as well.

39
00:02:44,130 --> 00:02:51,580
If you can the output you won't see anything yet because we have to put in the images or place holders

40
00:02:51,610 --> 00:02:53,650
that we want to be inside of the carousel.

41
00:02:53,980 --> 00:02:55,270
So we're going to work on next.

42
00:02:56,020 --> 00:03:01,230
Now that we've set up our bootstrap classes and this div will now be considered a carousel.

43
00:03:01,930 --> 00:03:07,870
So we're going to do first is set up an order list that will show the carousel indicators.

44
00:03:07,870 --> 00:03:13,400
So this will allow the user to click on arrows pointing left and right to flip through the carousel.

45
00:03:13,430 --> 00:03:15,340
Although they were flipping through a book of your products.

46
00:03:16,140 --> 00:03:16,330
OK.

47
00:03:16,340 --> 00:03:20,960
So I'm going to set up an ordered list which means it is numbered 0 L stands for ordered list.

48
00:03:21,400 --> 00:03:23,500
And this is an E UML tag.

49
00:03:24,100 --> 00:03:30,550
But then the class we will make a bootstrap class known as carousel indicators.

50
00:03:31,000 --> 00:03:38,140
And let's go ahead and immediately close off that ordered list tag inside of in of a list ordered or

51
00:03:38,140 --> 00:03:39,160
unordered.

52
00:03:39,160 --> 00:03:43,550
We need to put in list items so we can open ally for list items.

53
00:03:43,810 --> 00:03:46,400
And the first list item will be the first target.

54
00:03:46,410 --> 00:03:47,890
So we have to set the data target

55
00:03:50,880 --> 00:03:56,520
and we're going to set that to featured products carousel.

56
00:03:56,520 --> 00:04:03,240
This is the idea that matches right up here and that represents the Target data and where it's located.

57
00:04:03,630 --> 00:04:08,540
Because remember these are gonna be indicators that will allow us to click through.

58
00:04:08,580 --> 00:04:08,910
OK.

59
00:04:08,910 --> 00:04:15,160
So now we also have to set the data slide to 0.

60
00:04:15,210 --> 00:04:23,610
So this means that it will slide to the zeros data in the care of souls of the very first image in the

61
00:04:23,610 --> 00:04:31,290
Carousel because javascript uses zero based indexing which means all counting begins at 0 not 1.

62
00:04:31,290 --> 00:04:37,950
So this will slide to the zero element the zero page in the carousel and I'm gonna set the class to

63
00:04:37,980 --> 00:04:45,900
active and that means that the first element will always be active in the Carousel whenever the user

64
00:04:45,900 --> 00:04:46,710
scrolled down to it.

65
00:04:47,600 --> 00:04:47,920
OK.

66
00:04:47,940 --> 00:04:52,510
And we've closed off that list tag out of space.

67
00:04:52,800 --> 00:04:54,240
Okay great.

68
00:04:54,240 --> 00:04:55,980
Now we have that opened and closed.

69
00:04:55,980 --> 00:05:00,750
Let's go ahead and add another list item here.

70
00:05:00,750 --> 00:05:09,450
We're going to use the exact same format list data target equals hash tag featured products carousel

71
00:05:09,780 --> 00:05:14,040
with the data slide to this time it's going to be one.

72
00:05:14,100 --> 00:05:21,100
So you're going to need one of these target lists items for each of the pages in your carousel.

73
00:05:21,180 --> 00:05:24,360
In our case we're going to have three different products.

74
00:05:24,360 --> 00:05:32,220
So we're going to add three different list items from 0 to 2 0 1 2 that will be three items.

75
00:05:32,230 --> 00:05:39,390
Let's use the exact same format to set up the data target list item for the third product with the same

76
00:05:39,420 --> 00:05:42,040
I.D. feature products carousel.

77
00:05:42,090 --> 00:05:46,230
We have to set the targets so that the list item knows where it should go to.

78
00:05:46,230 --> 00:05:50,830
This is similar to setting up an anchor because you're setting a target at an I.D..

79
00:05:50,920 --> 00:05:51,760
Okay.

80
00:05:51,810 --> 00:05:59,580
And from data slide to in this case whenever this indicator is clicked on it can be sliding to the second

81
00:05:59,580 --> 00:06:00,660
index.

82
00:06:00,660 --> 00:06:06,030
So the third item and let's close that with item as well.

83
00:06:06,030 --> 00:06:06,430
Great.

84
00:06:06,450 --> 00:06:08,650
And the order list is already closed.

85
00:06:08,700 --> 00:06:11,910
So this is all that we need to set up the indicators.

86
00:06:11,910 --> 00:06:14,300
Now we can actually set up the carousel itself.

87
00:06:14,310 --> 00:06:19,860
So the inside of the carousel we can set up the pictures we want to show or the videos want to show

88
00:06:21,000 --> 00:06:23,070
or placeholders want to have et cetera.

89
00:06:23,070 --> 00:06:24,870
Anything you want in the carousel.

90
00:06:24,960 --> 00:06:25,170
OK.

91
00:06:25,200 --> 00:06:28,290
So how we do that we're gonna use again bootstrap classes.

92
00:06:28,380 --> 00:06:30,330
So we have an ordered list.

93
00:06:30,330 --> 00:06:36,480
Now we're going to set up another bootstrap class known as carousel inner and Carousel in our will allow

94
00:06:36,480 --> 00:06:40,830
you to put inside items carousel items.

95
00:06:40,890 --> 00:06:44,790
So it's open out with div class equals carousel.

96
00:06:45,900 --> 00:06:49,740
And we can go ahead and close that immediately as well.

97
00:06:49,800 --> 00:06:52,500
So this will hold all of our items.

98
00:06:52,590 --> 00:06:54,840
So let's go ahead and make another day of class.

99
00:06:54,840 --> 00:06:57,310
Class equals carousel item.

100
00:06:57,330 --> 00:07:00,580
This means that this div will contain a carousel item.

101
00:07:00,580 --> 00:07:01,600
Let's go ahead and close that.

102
00:07:01,620 --> 00:07:08,280
Immediately we can also add an active because this will be the first item you're going to add image

103
00:07:08,310 --> 00:07:12,720
container which will allow you to put inside images.

104
00:07:12,720 --> 00:07:13,050
OK.

105
00:07:13,080 --> 00:07:14,000
So we have that closed.

106
00:07:14,010 --> 00:07:17,580
Let's add a comment here noting what each one is

107
00:07:21,130 --> 00:07:27,520
it's useful to add comments to tell you what each closing div tag represents

108
00:07:30,320 --> 00:07:30,690
OK.

109
00:07:30,720 --> 00:07:33,330
And this last Dave is our featured products carousel

110
00:07:36,130 --> 00:07:38,260
featured products.

111
00:07:38,260 --> 00:07:38,740
OK great.

112
00:07:38,770 --> 00:07:41,820
So now we have one carousel item.

113
00:07:41,920 --> 00:07:45,340
We're also going to have multiple ones.

114
00:07:45,340 --> 00:07:48,220
So let's go ahead and those as well.

115
00:07:48,580 --> 00:07:56,360
You can go ahead and just copy this whole code here and paste it right below.

116
00:07:57,130 --> 00:08:01,500
But this time because it's for the second item we don't need it to be active.

117
00:08:01,770 --> 00:08:03,620
And we also don't need this image container.

118
00:08:03,730 --> 00:08:06,940
If we're not putting images yet we can leave it there as a reminder.

119
00:08:07,420 --> 00:08:07,870
OK.

120
00:08:07,870 --> 00:08:11,050
We have a second item here and we'll go ahead and copy that.

121
00:08:11,050 --> 00:08:14,260
To make the third item.

122
00:08:14,260 --> 00:08:19,900
So now we have the carousel in our class which means that we're making the inside of the carousel and

123
00:08:19,900 --> 00:08:21,640
we have three items.

124
00:08:21,640 --> 00:08:27,670
The output won't show anything yet because we haven't actually put in anything into the items we haven't

125
00:08:27,670 --> 00:08:30,760
put in any images or text et cetera.

126
00:08:30,850 --> 00:08:34,070
So we're gonna be working on that in the next lecture because this has been enough for an hour to set

127
00:08:34,070 --> 00:08:37,810
up the template and you can populate this with anything you want.

128
00:08:37,810 --> 00:08:43,210
I challenge you to try populating yourself before we dive into populating it together in the next lecture.

129
00:08:43,210 --> 00:08:44,170
Thank you all for watching.

130
00:08:44,170 --> 00:08:45,730
Congratulations on making it this far.

131
00:08:46,300 --> 00:08:47,680
And we will see you in the next lecture.